@elliemae/ds-form-date-time-picker 3.80.0-next.3 → 3.80.0-next.31
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/constants/index.js +15 -1
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/parts/DateInputs/DateInputs.js +5 -5
- package/dist/cjs/parts/DateInputs/DateInputs.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/CalendarBody.js +18 -14
- package/dist/cjs/parts/Pickers/Calendar/CalendarBody.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/CalendarContent.js +1 -1
- package/dist/cjs/parts/Pickers/Calendar/CalendarContent.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/CalendarHead.js +1 -1
- package/dist/cjs/parts/Pickers/Calendar/CalendarHead.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/CalendarWeekDays.js +27 -22
- package/dist/cjs/parts/Pickers/Calendar/CalendarWeekDays.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/Styleds.js +16 -4
- package/dist/cjs/parts/Pickers/Calendar/Styleds.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/usePopperTriggerLogic.js +12 -3
- package/dist/cjs/parts/Pickers/Calendar/usePopperTriggerLogic.js.map +2 -2
- package/dist/cjs/parts/Pickers/PickersIcons.js +2 -1
- package/dist/cjs/parts/Pickers/PickersIcons.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js +5 -5
- package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js +8 -8
- package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js +5 -5
- package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js +16 -4
- package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelContent.js +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelContent.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/usePopperTriggerLogic.js +4 -3
- package/dist/cjs/parts/Pickers/TimeWheel/usePopperTriggerLogic.js.map +2 -2
- package/dist/cjs/parts/Styleds.js +16 -36
- package/dist/cjs/parts/Styleds.js.map +2 -2
- package/dist/cjs/parts/TimeInputs/TimeInputs.js +5 -5
- package/dist/cjs/parts/TimeInputs/TimeInputs.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/slot-arguments-polymorphic-typescript.js.map +1 -1
- package/dist/cjs/typescript-testing/slot-props.js +73 -0
- package/dist/cjs/typescript-testing/slot-props.js.map +2 -2
- package/dist/esm/constants/index.js +15 -1
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/parts/DateInputs/DateInputs.js +5 -5
- package/dist/esm/parts/DateInputs/DateInputs.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarBody.js +18 -14
- package/dist/esm/parts/Pickers/Calendar/CalendarBody.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarContent.js +1 -1
- package/dist/esm/parts/Pickers/Calendar/CalendarContent.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarHead.js +1 -1
- package/dist/esm/parts/Pickers/Calendar/CalendarHead.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarWeekDays.js +27 -22
- package/dist/esm/parts/Pickers/Calendar/CalendarWeekDays.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/Styleds.js +21 -5
- package/dist/esm/parts/Pickers/Calendar/Styleds.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/usePopperTriggerLogic.js +12 -3
- package/dist/esm/parts/Pickers/Calendar/usePopperTriggerLogic.js.map +2 -2
- package/dist/esm/parts/Pickers/PickersIcons.js +2 -1
- package/dist/esm/parts/Pickers/PickersIcons.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/HoursList.js +5 -5
- package/dist/esm/parts/Pickers/TimeWheel/HoursList.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js +8 -8
- package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js +5 -5
- package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/Styleds.js +21 -5
- package/dist/esm/parts/Pickers/TimeWheel/Styleds.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelContent.js +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelContent.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/usePopperTriggerLogic.js +4 -3
- package/dist/esm/parts/Pickers/TimeWheel/usePopperTriggerLogic.js.map +2 -2
- package/dist/esm/parts/Styleds.js +21 -37
- package/dist/esm/parts/Styleds.js.map +2 -2
- package/dist/esm/parts/TimeInputs/TimeInputs.js +5 -5
- package/dist/esm/parts/TimeInputs/TimeInputs.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +2 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/slot-props.js +73 -0
- package/dist/esm/typescript-testing/slot-props.js.map +2 -2
- package/dist/types/constants/index.d.ts +48 -0
- package/dist/types/parts/Styleds.d.ts +0 -3
- package/dist/types/slot-arguments-polymorphic-typescript.d.ts +18 -2
- package/package.json +12 -12
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/Calendar/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 { css, styled, type Theme } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\n// Diagonal line \u2014 shape only. Caller supplies the color function.\nconst makeDiagonalLine = (getColor: (props: { theme: Theme }) => string) => css`\n &:before {\n position: absolute;\n content: '';\n top: 48%;\n left: -2px;\n height: 1px;\n width: calc(100% + 4px);\n transform: rotate(45deg);\n background-color: ${getColor};\n }\n`;\n// Default: neutral-500, used for active disabled/out-of-range days.\nconst diagonalLine = makeDiagonalLine(({ theme }) => theme.colors.neutral[500]);\n\n// Focus ring frame \u2014 shape only. Colour is always brand-700, injected in StyledWeekDaysListWrapper\n// under .focusedDay so a single rule governs the ring colour regardless of day state.\nconst focusBorder = css`\n &:after {\n position: absolute;\n content: '';\n top: -4px;\n left: -4px;\n width: calc(100% + 8px);\n height: calc(100% + 8px);\n border-radius: 50%;\n }\n`;\n\nconst backgroundDateRange = {\n inRange: css`\n background-color: ${({ theme }) => theme.colors.brand[100]};\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[100]};\n `,\n startRange: css`\n background-color: ${({ theme }) => theme.colors.brand[100]};\n border-radius: 50% 0 0 50%;\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[100]};\n `,\n endRange: css`\n background-color: ${({ theme }) => theme.colors.brand[100]};\n border-radius: 0 50% 50% 0;\n `,\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR,\n})`\n color: ${({ theme }) => theme.colors.brand['800']};\n width: 2rem;\n height: 2rem;\n`;\n\nexport const StyledShadowWrapper = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR,\n})``;\n\nexport const StyledCalendarWrapper = styled.div<{ $readOnlyStyles?: boolean }>`\n display: grid;\n min-width: 260px;\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled.section`\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n display: grid;\n padding: ${({ theme }) => theme.space.xxxs};\n grid-template-columns: min-content min-content 1fr min-content min-content;\n grid-template-rows: 1fr;\n align-items: center;\n justify-content: center;\n text-align: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledHeaderLabel = styled('h3', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_LABEL,\n})`\n font-size: 1rem;\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_BUTTON,\n})`\n position: relative;\n width: 2.1538rem;\n height: 2.1538rem;\n &:focus {\n &:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n &:hover {\n background: ${({ theme }) => theme.colors.brand[200]};\n }\n`;\n\nexport const StyledBody = styled.section`\n padding: ${({ theme }) => theme.space.xxxs};\n`;\n\n// StyledDayBtn owns shape, cursor, and the focus ring frame.\n// Hover colours live in StyledWeekDaysListWrapper using parent-class selectors whose\n// specificity (\u22650,6,0) beats DSButtonV2's internal transparent hover at (0,2,0).\nexport const StyledDayBtn = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CALENDAR.DAY_BUTTON,\n})<{ $readOnlyStyles?: boolean }>`\n height: 2.4615rem;\n width: 2.4615rem;\n border-radius: 50%;\n position: relative;\n border-width: 2px;\n border-style: solid;\n border-color: transparent;\n line-height: 1;\n color: ${({ theme }) => theme.colors.neutral[800]};\n cursor: ${({ $readOnlyStyles }) => ($readOnlyStyles ? 'not-allowed' : 'pointer')};\n display: flex;\n justify-content: center;\n align-items: center;\n &:focus {\n ${focusBorder}\n }\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})<{ isHeader?: boolean }>`\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n text-align: center;\n justify-items: center;\n ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SELECTED (valid) \u2014 defect fix: brand-600, was brand-700\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .dayWrapper.selectedDay,\n .dayWrapper.startRangeDay,\n .dayWrapper.endRangeDay {\n &:not(.disabledDay):not(.outOfRangeDay):not(.readOnly) {\n ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.brand[600]};\n color: ${({ theme }) => theme.colors.neutral['000']};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n }\n }\n\n /* selected invalid: danger-900 background */\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.danger[900]};\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n INVALID (disabled / out-of-range) \u2014 base colour + diagonal\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .dayWrapper.disabledDay,\n .dayWrapper.outOfRangeDay {\n ${StyledDayBtn} {\n cursor: not-allowed;\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${diagonalLine}\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n }\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n FOCUS RING \u2014 always brand-700 regardless of day state\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .dayWrapper.focusedDay {\n ${StyledDayBtn} {\n ${focusBorder}\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n\n /* focused valid not-readOnly: brand text */\n &:not(.readOnly):not(.disabledDay):not(.outOfRangeDay):not(.selectedDay):not(.startRangeDay):not(.endRangeDay) {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.brand[600]};\n }\n }\n\n /* focused invalid not-readOnly: brand text + brand diagonal */\n &.disabledDay:not(.readOnly):not(.selectedDay):not(.startRangeDay):not(.endRangeDay),\n &.outOfRangeDay:not(.readOnly):not(.selectedDay):not(.startRangeDay):not(.endRangeDay) {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.brand[600]};\n &:before {\n background-color: ${({ theme }) => theme.colors.brand[600]};\n }\n }\n }\n\n /* focused selected: white text, white inner border (gap), blue outer ring from generic rule */\n &.selectedDay,\n &.startRangeDay,\n &.endRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n border-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n /* focused valid selected (non-readOnly): brand-800 background matches hover */\n &.selectedDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n &.startRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n &.endRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly) {\n ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n /* focused selected invalid: white text + white diagonal */\n &.selectedDay.disabledDay,\n &.selectedDay.outOfRangeDay,\n &.startRangeDay.disabledDay,\n &.startRangeDay.outOfRangeDay,\n &.endRangeDay.disabledDay,\n &.endRangeDay.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n HOVER BACKGROUNDS \u2014 new spec\n Semi-bold on hover for all non-selected states.\n Rules ordered low \u2192 high specificity so readOnly always wins.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /* valid, not selected, not readOnly */\n .dayWrapper:not(.disabledDay):not(.outOfRangeDay):not(.readOnly):not(.selectedDay):not(.startRangeDay):not(\n .endRangeDay\n ) {\n ${StyledDayBtn}:hover {\n background-color: ${({ theme }) => theme.colors.brand[100]};\n color: ${({ theme }) => theme.colors.brand[700]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n }\n }\n\n /* invalid, not selected, not readOnly */\n .dayWrapper.disabledDay:not(.selectedDay):not(.readOnly),\n .dayWrapper.outOfRangeDay:not(.selectedDay):not(.readOnly) {\n ${StyledDayBtn}:hover {\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 background-color: #fffcfc; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n }\n }\n\n /* selected valid, not readOnly */\n .dayWrapper.selectedDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n .dayWrapper.startRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n .dayWrapper.endRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly) {\n ${StyledDayBtn}:hover {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n /* selected invalid, not readOnly */\n .dayWrapper.selectedDay.disabledDay:not(.readOnly),\n .dayWrapper.selectedDay.outOfRangeDay:not(.readOnly),\n .dayWrapper.startRangeDay.disabledDay:not(.readOnly),\n .dayWrapper.startRangeDay.outOfRangeDay:not(.readOnly),\n .dayWrapper.endRangeDay.disabledDay:not(.readOnly),\n .dayWrapper.endRangeDay.outOfRangeDay:not(.readOnly) {\n ${StyledDayBtn}:hover {\n background-color: ${({ theme }) => theme.colors.danger[950]};\n }\n }\n\n /* readOnly, not selected (any validity) \u2014 wins over all non-readOnly hover rules */\n .dayWrapper.readOnly:not(.selectedDay):not(.startRangeDay):not(.endRangeDay) {\n ${StyledDayBtn}:hover {\n background-color: ${({ theme }) => theme.colors.neutral[100]};\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n }\n }\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n READONLY REST STATES\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .dayWrapper.selectedDay.readOnly,\n .dayWrapper.startRangeDay.readOnly,\n .dayWrapper.endRangeDay.readOnly {\n ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.neutral['500']};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n /* (0,6,0) beats DSButtonV2's .liKnyT:hover { background: transparent } at (0,2,0) */\n &:hover {\n background-color: ${({ theme }) => theme.colors.neutral['700']};\n }\n :focus {\n background-color: ${({ theme }) => theme.colors.neutral['700']};\n }\n }\n }\n\n .dayWrapper.disabledDay.readOnly,\n .dayWrapper.outOfRangeDay.readOnly {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral[700]};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral[700]};\n }\n }\n &.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral[700]};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral[700]};\n }\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n }\n }\n\n .dayWrapper.selectedDay.disabledDay.readOnly,\n .dayWrapper.selectedDay.outOfRangeDay.readOnly,\n .dayWrapper.startRangeDay.disabledDay.readOnly,\n .dayWrapper.startRangeDay.outOfRangeDay.readOnly,\n .dayWrapper.endRangeDay.disabledDay.readOnly,\n .dayWrapper.endRangeDay.outOfRangeDay.readOnly {\n ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.neutral['500']};\n color: ${({ theme }) => theme.colors.neutral['000']};\n ${makeDiagonalLine(({ theme }) => theme.colors.neutral['000'])}\n &:hover {\n background-color: ${({ theme }) => theme.colors.neutral['700']};\n }\n :focus {\n background-color: ${({ theme }) => theme.colors.neutral['700']};\n }\n }\n }\n\n .dayWrapper.inRangeDay.readOnly {\n background-color: ${({ theme }) => theme.colors.neutral['100']};\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.neutral['100']};\n }\n\n .dayWrapper.inRangeDay.disabledDay.readOnly,\n .dayWrapper.inRangeDay.outOfRangeDay.readOnly {\n ${StyledDayBtn} {\n background-color: transparent;\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${makeDiagonalLine(({ theme }) => theme.colors.neutral[700])}\n }\n }\n\n .dayWrapper.startRangeDay.inRangeImproperDay.readOnly {\n background-color: ${({ theme }) => theme.colors.neutral['100']};\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.neutral['100']};\n }\n\n .dayWrapper.endRangeDay.inRangeImproperDay.readOnly {\n background-color: ${({ theme }) => theme.colors.neutral['100']};\n }\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n NOT CURRENT MONTH\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .dayWrapper.notCurrentMonth {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.brand[600]};\n }\n\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.brand[600]};\n }\n\n &.inRangeDay,\n &.startRangeDay,\n &.endRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n &.selectedDay,\n &.startRangeDay,\n &.endRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n RANGE DAYS\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .dayWrapper.inRangeDay {\n ${backgroundDateRange.inRange}\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n background-color: transparent;\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${makeDiagonalLine(({ theme }) => theme.colors.neutral[700])}\n }\n &.focusedDay {\n ${StyledDayBtn} {\n &:after {\n border-color: ${({ theme }) => theme.colors.brand[700]};\n }\n }\n }\n }\n }\n\n .dayWrapper.startRangeDay {\n &.inRangeImproperDay {\n ${backgroundDateRange.startRange}\n }\n &.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n .dayWrapper.endRangeDay {\n &.inRangeImproperDay {\n ${backgroundDateRange.endRange}\n }\n &.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n .dayWrapper.endRangeDay.startRangeDay {\n background-color: transparent;\n box-shadow: none;\n }\n`;\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n min-width: 2.4615rem;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const CalendarFooterMessage = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR,\n})<{ $readOnlyStyles?: boolean }>`\n border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n margin: 0 ${({ theme }) => theme.space.xxs2};\n padding: ${({ theme }) => theme.space.xxs2} 0;\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2B;AAC3B,qBAAqB;AACrB,uBAAwC;AACxC,
|
|
4
|
+
"sourcesContent": ["/* 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 {\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n FORM_DATE_TIME_PICKER_SLOTS,\n} from '../../../constants/index.js';\n\n// Diagonal line \u2014 shape only. Caller supplies the color function.\nconst makeDiagonalLine = (getColor: (props: { theme: Theme }) => string) => css`\n &:before {\n position: absolute;\n content: '';\n top: 48%;\n left: -2px;\n height: 1px;\n width: calc(100% + 4px);\n transform: rotate(45deg);\n background-color: ${getColor};\n }\n`;\n// Default: neutral-500, used for active disabled/out-of-range days.\nconst diagonalLine = makeDiagonalLine(({ theme }) => theme.colors.neutral[500]);\n\n// Focus ring frame \u2014 shape only. Colour is always brand-700, injected in StyledWeekDaysListWrapper\n// under .focusedDay so a single rule governs the ring colour regardless of day state.\nconst focusBorder = css`\n &:after {\n position: absolute;\n content: '';\n top: -4px;\n left: -4px;\n width: calc(100% + 8px);\n height: calc(100% + 8px);\n border-radius: 50%;\n }\n`;\n\nconst backgroundDateRange = {\n inRange: css`\n background-color: ${({ theme }) => theme.colors.brand[100]};\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[100]};\n `,\n startRange: css`\n background-color: ${({ theme }) => theme.colors.brand[100]};\n border-radius: 50% 0 0 50%;\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[100]};\n `,\n endRange: css`\n background-color: ${({ theme }) => theme.colors.brand[100]};\n border-radius: 0 50% 50% 0;\n `,\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR,\n})`\n color: ${({ theme }) => theme.colors.brand['800']};\n width: 2rem;\n height: 2rem;\n`;\n\nexport const StyledShadowWrapper = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR,\n})``;\n\nexport const StyledCalendarWrapper = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: FORM_DATE_TIME_PICKER_SLOTS.CALENDAR_WRAPPER,\n})<{ $readOnlyStyles?: boolean }>`\n display: grid;\n min-width: 260px;\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled('section', {\n name: DSControlledDateTimePickerName,\n slot: FORM_DATE_TIME_PICKER_SLOTS.CALENDAR_HEADER,\n})`\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n display: grid;\n padding: ${({ theme }) => theme.space.xxxs};\n grid-template-columns: min-content min-content 1fr min-content min-content;\n grid-template-rows: 1fr;\n align-items: center;\n justify-content: center;\n text-align: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledHeaderLabel = styled('h3', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_LABEL,\n})`\n font-size: 1rem;\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_BUTTON,\n})`\n position: relative;\n width: 2.1538rem;\n height: 2.1538rem;\n &:focus {\n &:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n &:hover {\n background: ${({ theme }) => theme.colors.brand[200]};\n }\n`;\n\nexport const StyledBody = styled('section', {\n name: DSControlledDateTimePickerName,\n slot: FORM_DATE_TIME_PICKER_SLOTS.CALENDAR_BODY,\n})`\n padding: ${({ theme }) => theme.space.xxxs};\n`;\n\n// StyledDayBtn owns shape, cursor, and the focus ring frame.\n// Hover colours live in StyledWeekDaysListWrapper using parent-class selectors whose\n// specificity (\u22650,6,0) beats DSButtonV2's internal transparent hover at (0,2,0).\nexport const StyledDayBtn = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CALENDAR.DAY_BUTTON,\n})<{ $readOnlyStyles?: boolean }>`\n height: 2.4615rem;\n width: 2.4615rem;\n border-radius: 50%;\n position: relative;\n border-width: 2px;\n border-style: solid;\n border-color: transparent;\n line-height: 1;\n color: ${({ theme }) => theme.colors.neutral[800]};\n cursor: ${({ $readOnlyStyles }) => ($readOnlyStyles ? 'not-allowed' : 'pointer')};\n display: flex;\n justify-content: center;\n align-items: center;\n &:focus {\n ${focusBorder}\n }\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})<{ isHeader?: boolean }>`\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n text-align: center;\n justify-items: center;\n ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SELECTED (valid) \u2014 defect fix: brand-600, was brand-700\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .dayWrapper.selectedDay,\n .dayWrapper.startRangeDay,\n .dayWrapper.endRangeDay {\n &:not(.disabledDay):not(.outOfRangeDay):not(.readOnly) {\n ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.brand[600]};\n color: ${({ theme }) => theme.colors.neutral['000']};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n }\n }\n\n /* selected invalid: danger-900 background */\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.danger[900]};\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n INVALID (disabled / out-of-range) \u2014 base colour + diagonal\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .dayWrapper.disabledDay,\n .dayWrapper.outOfRangeDay {\n ${StyledDayBtn} {\n cursor: not-allowed;\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${diagonalLine}\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n }\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n FOCUS RING \u2014 always brand-700 regardless of day state\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .dayWrapper.focusedDay {\n ${StyledDayBtn} {\n ${focusBorder}\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n\n /* focused valid not-readOnly: brand text */\n &:not(.readOnly):not(.disabledDay):not(.outOfRangeDay):not(.selectedDay):not(.startRangeDay):not(.endRangeDay) {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.brand[600]};\n }\n }\n\n /* focused invalid not-readOnly: brand text + brand diagonal */\n &.disabledDay:not(.readOnly):not(.selectedDay):not(.startRangeDay):not(.endRangeDay),\n &.outOfRangeDay:not(.readOnly):not(.selectedDay):not(.startRangeDay):not(.endRangeDay) {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.brand[600]};\n &:before {\n background-color: ${({ theme }) => theme.colors.brand[600]};\n }\n }\n }\n\n /* focused selected: white text, white inner border (gap), blue outer ring from generic rule */\n &.selectedDay,\n &.startRangeDay,\n &.endRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n border-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n\n /* focused valid selected (non-readOnly): brand-800 background matches hover */\n &.selectedDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n &.startRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n &.endRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly) {\n ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n /* focused selected invalid: white text + white diagonal */\n &.selectedDay.disabledDay,\n &.selectedDay.outOfRangeDay,\n &.startRangeDay.disabledDay,\n &.startRangeDay.outOfRangeDay,\n &.endRangeDay.disabledDay,\n &.endRangeDay.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n HOVER BACKGROUNDS \u2014 new spec\n Semi-bold on hover for all non-selected states.\n Rules ordered low \u2192 high specificity so readOnly always wins.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /* valid, not selected, not readOnly */\n .dayWrapper:not(.disabledDay):not(.outOfRangeDay):not(.readOnly):not(.selectedDay):not(.startRangeDay):not(\n .endRangeDay\n ) {\n ${StyledDayBtn}:hover {\n background-color: ${({ theme }) => theme.colors.brand[100]};\n color: ${({ theme }) => theme.colors.brand[700]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n }\n }\n\n /* invalid, not selected, not readOnly */\n .dayWrapper.disabledDay:not(.selectedDay):not(.readOnly),\n .dayWrapper.outOfRangeDay:not(.selectedDay):not(.readOnly) {\n ${StyledDayBtn}:hover {\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 background-color: #fffcfc; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n }\n }\n\n /* selected valid, not readOnly */\n .dayWrapper.selectedDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n .dayWrapper.startRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n .dayWrapper.endRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly) {\n ${StyledDayBtn}:hover {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n /* selected invalid, not readOnly */\n .dayWrapper.selectedDay.disabledDay:not(.readOnly),\n .dayWrapper.selectedDay.outOfRangeDay:not(.readOnly),\n .dayWrapper.startRangeDay.disabledDay:not(.readOnly),\n .dayWrapper.startRangeDay.outOfRangeDay:not(.readOnly),\n .dayWrapper.endRangeDay.disabledDay:not(.readOnly),\n .dayWrapper.endRangeDay.outOfRangeDay:not(.readOnly) {\n ${StyledDayBtn}:hover {\n background-color: ${({ theme }) => theme.colors.danger[950]};\n }\n }\n\n /* readOnly, not selected (any validity) \u2014 wins over all non-readOnly hover rules */\n .dayWrapper.readOnly:not(.selectedDay):not(.startRangeDay):not(.endRangeDay) {\n ${StyledDayBtn}:hover {\n background-color: ${({ theme }) => theme.colors.neutral[100]};\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n }\n }\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n READONLY REST STATES\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .dayWrapper.selectedDay.readOnly,\n .dayWrapper.startRangeDay.readOnly,\n .dayWrapper.endRangeDay.readOnly {\n ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.neutral['500']};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n /* (0,6,0) beats DSButtonV2's .liKnyT:hover { background: transparent } at (0,2,0) */\n &:hover {\n background-color: ${({ theme }) => theme.colors.neutral['700']};\n }\n :focus {\n background-color: ${({ theme }) => theme.colors.neutral['700']};\n }\n }\n }\n\n .dayWrapper.disabledDay.readOnly,\n .dayWrapper.outOfRangeDay.readOnly {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral[700]};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral[700]};\n }\n }\n &.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral[700]};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral[700]};\n }\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n }\n }\n\n .dayWrapper.selectedDay.disabledDay.readOnly,\n .dayWrapper.selectedDay.outOfRangeDay.readOnly,\n .dayWrapper.startRangeDay.disabledDay.readOnly,\n .dayWrapper.startRangeDay.outOfRangeDay.readOnly,\n .dayWrapper.endRangeDay.disabledDay.readOnly,\n .dayWrapper.endRangeDay.outOfRangeDay.readOnly {\n ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.neutral['500']};\n color: ${({ theme }) => theme.colors.neutral['000']};\n ${makeDiagonalLine(({ theme }) => theme.colors.neutral['000'])}\n &:hover {\n background-color: ${({ theme }) => theme.colors.neutral['700']};\n }\n :focus {\n background-color: ${({ theme }) => theme.colors.neutral['700']};\n }\n }\n }\n\n .dayWrapper.inRangeDay.readOnly {\n background-color: ${({ theme }) => theme.colors.neutral['100']};\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.neutral['100']};\n }\n\n .dayWrapper.inRangeDay.disabledDay.readOnly,\n .dayWrapper.inRangeDay.outOfRangeDay.readOnly {\n ${StyledDayBtn} {\n background-color: transparent;\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${makeDiagonalLine(({ theme }) => theme.colors.neutral[700])}\n }\n }\n\n .dayWrapper.startRangeDay.inRangeImproperDay.readOnly {\n background-color: ${({ theme }) => theme.colors.neutral['100']};\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.neutral['100']};\n }\n\n .dayWrapper.endRangeDay.inRangeImproperDay.readOnly {\n background-color: ${({ theme }) => theme.colors.neutral['100']};\n }\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n NOT CURRENT MONTH\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .dayWrapper.notCurrentMonth {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.brand[600]};\n }\n\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.brand[600]};\n }\n\n &.inRangeDay,\n &.startRangeDay,\n &.endRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n &.selectedDay,\n &.startRangeDay,\n &.endRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n RANGE DAYS\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .dayWrapper.inRangeDay {\n ${backgroundDateRange.inRange}\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n background-color: transparent;\n color: ${({ theme }) => theme.colors.neutral[700]};\n ${makeDiagonalLine(({ theme }) => theme.colors.neutral[700])}\n }\n &.focusedDay {\n ${StyledDayBtn} {\n &:after {\n border-color: ${({ theme }) => theme.colors.brand[700]};\n }\n }\n }\n }\n }\n\n .dayWrapper.startRangeDay {\n &.inRangeImproperDay {\n ${backgroundDateRange.startRange}\n }\n &.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n .dayWrapper.endRangeDay {\n &.inRangeImproperDay {\n ${backgroundDateRange.endRange}\n }\n &.focusedDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n &.disabledDay,\n &.outOfRangeDay {\n ${StyledDayBtn} {\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n }\n }\n\n .dayWrapper.endRangeDay.startRangeDay {\n background-color: transparent;\n box-shadow: none;\n }\n`;\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport const StyledWeekDaysHeaderItem = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: FORM_DATE_TIME_PICKER_SLOTS.CALENDAR_HEADER_WEEKLY_DAY_ITEM,\n})`\n min-width: 2.4615rem;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const CalendarFooterMessage = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR,\n})<{ $readOnlyStyles?: boolean }>`\n border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n margin: 0 ${({ theme }) => theme.space.xxs2};\n padding: ${({ theme }) => theme.space.xxs2} 0;\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
|
}
|
|
@@ -44,6 +44,7 @@ const usePopperTriggerLogic = ({
|
|
|
44
44
|
const {
|
|
45
45
|
props: { onPickerOpen, onPickerClose, disabled },
|
|
46
46
|
pickerButtonRef,
|
|
47
|
+
isWithTimeWheelToo,
|
|
47
48
|
trackFocusCalendarMetafocusedDay,
|
|
48
49
|
trackFocusCalendarPrevMonth,
|
|
49
50
|
trackFocusPicker,
|
|
@@ -52,8 +53,9 @@ const usePopperTriggerLogic = ({
|
|
|
52
53
|
} = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
|
|
53
54
|
const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
|
|
54
55
|
const handleOnPickerOpen = (0, import_react.useCallback)(() => {
|
|
56
|
+
if (isWithTimeWheelToo) return;
|
|
55
57
|
onPickerOpen();
|
|
56
|
-
}, [onPickerOpen]);
|
|
58
|
+
}, [isWithTimeWheelToo, onPickerOpen]);
|
|
57
59
|
const openCalendar = (0, import_react.useCallback)(() => {
|
|
58
60
|
if (disabled) return;
|
|
59
61
|
if (focusedDay) trackFocusCalendarMetafocusedDay();
|
|
@@ -70,11 +72,18 @@ const usePopperTriggerLogic = ({
|
|
|
70
72
|
]);
|
|
71
73
|
const closeCalendar = (0, import_react.useCallback)(() => {
|
|
72
74
|
setShowCalendar(false);
|
|
73
|
-
onPickerClose();
|
|
75
|
+
if (!isWithTimeWheelToo) onPickerClose();
|
|
74
76
|
resetFocusedDayToStartDate();
|
|
75
77
|
trackFocusPicker();
|
|
76
78
|
resetMonthYear();
|
|
77
|
-
}, [
|
|
79
|
+
}, [
|
|
80
|
+
setShowCalendar,
|
|
81
|
+
isWithTimeWheelToo,
|
|
82
|
+
onPickerClose,
|
|
83
|
+
resetFocusedDayToStartDate,
|
|
84
|
+
trackFocusPicker,
|
|
85
|
+
resetMonthYear
|
|
86
|
+
]);
|
|
78
87
|
const handleToggleCalendar = (0, import_react.useCallback)(() => {
|
|
79
88
|
const isOpening = !showCalendar;
|
|
80
89
|
if (isOpening) openCalendar();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/Calendar/usePopperTriggerLogic.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type React from 'react';\nimport { useMemo, useCallback, useState, useContext } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport type { useFocusLogic } from './useFocusLogic.js';\n\ninterface UsePopperTriggerLogic {\n focusLogic: ReturnType<typeof useFocusLogic>;\n showCalendar: boolean;\n setShowCalendar: TypescriptHelpersT.StateSetter<boolean>;\n resetMonthYear: () => void;\n}\ninterface PopperTriggerLogicT {\n referenceElement: HTMLButtonElement | null;\n closeCalendar: () => void;\n handleToggleCalendar: () => void;\n handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport const usePopperTriggerLogic = ({\n focusLogic,\n showCalendar,\n setShowCalendar,\n resetMonthYear,\n}: UsePopperTriggerLogic): PopperTriggerLogicT => {\n const { focusedDay, resetFocusedDayToStartDate } = focusLogic;\n const {\n props: { onPickerOpen, onPickerClose, disabled },\n\n pickerButtonRef,\n trackFocusCalendarMetafocusedDay,\n trackFocusCalendarPrevMonth,\n trackFocusPicker,\n latestInteractionRegion,\n currFocusDescriber,\n } = useContext(ControlledDateTimePickerContext);\n const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n //
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAA2D;AAE3D,yCAAgD;AAgBzC,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkD;AAChD,QAAM,EAAE,YAAY,2BAA2B,IAAI;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,eAAe,SAAS;AAAA,IAE/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAmC,IAAI;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type React from 'react';\nimport { useMemo, useCallback, useState, useContext } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport type { useFocusLogic } from './useFocusLogic.js';\n\ninterface UsePopperTriggerLogic {\n focusLogic: ReturnType<typeof useFocusLogic>;\n showCalendar: boolean;\n setShowCalendar: TypescriptHelpersT.StateSetter<boolean>;\n resetMonthYear: () => void;\n}\ninterface PopperTriggerLogicT {\n referenceElement: HTMLButtonElement | null;\n closeCalendar: () => void;\n handleToggleCalendar: () => void;\n handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport const usePopperTriggerLogic = ({\n focusLogic,\n showCalendar,\n setShowCalendar,\n resetMonthYear,\n}: UsePopperTriggerLogic): PopperTriggerLogicT => {\n const { focusedDay, resetFocusedDayToStartDate } = focusLogic;\n const {\n props: { onPickerOpen, onPickerClose, disabled },\n\n pickerButtonRef,\n isWithTimeWheelToo,\n trackFocusCalendarMetafocusedDay,\n trackFocusCalendarPrevMonth,\n trackFocusPicker,\n latestInteractionRegion,\n currFocusDescriber,\n } = useContext(ControlledDateTimePickerContext);\n const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n\n // True only for DATE_TIME, where this hook is nested inside `CalendarWithTimeWheel` \u2014 that parent\n // owns the popper and calls the consumer callbacks itself, so reporting from here too made\n // DATE_TIME fire them 3\u00D7 per interaction. Hard-false for DATE-only, which is unaffected.\n const handleOnPickerOpen = useCallback(() => {\n if (isWithTimeWheelToo) return;\n onPickerOpen();\n }, [isWithTimeWheelToo, onPickerOpen]);\n // onOpen we try to focus the day we should focus, if we should focus one\n const openCalendar = useCallback(() => {\n if (disabled) return;\n if (focusedDay) trackFocusCalendarMetafocusedDay();\n else setTimeout(() => trackFocusCalendarPrevMonth());\n setShowCalendar(true);\n handleOnPickerOpen();\n }, [\n disabled,\n focusedDay,\n handleOnPickerOpen,\n setShowCalendar,\n trackFocusCalendarMetafocusedDay,\n trackFocusCalendarPrevMonth,\n ]);\n\n const closeCalendar = useCallback(() => {\n setShowCalendar(false);\n if (!isWithTimeWheelToo) onPickerClose();\n resetFocusedDayToStartDate();\n trackFocusPicker();\n resetMonthYear();\n }, [\n setShowCalendar,\n isWithTimeWheelToo,\n onPickerClose,\n resetFocusedDayToStartDate,\n trackFocusPicker,\n resetMonthYear,\n ]);\n\n const handleToggleCalendar = useCallback(() => {\n const isOpening = !showCalendar;\n if (isOpening) openCalendar();\n else closeCalendar();\n }, [closeCalendar, openCalendar, showCalendar]);\n\n const handleSetTriggerRef = useCallback(\n (newRef: HTMLButtonElement) => {\n pickerButtonRef.current = newRef;\n setReferenceElement(newRef);\n if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef?.focus();\n },\n [currFocusDescriber, latestInteractionRegion, pickerButtonRef],\n );\n const handleMenuWrapperKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n if (key === 'Escape') {\n closeCalendar();\n trackFocusPicker();\n }\n },\n [closeCalendar, trackFocusPicker],\n );\n\n return useMemo(\n () => ({\n referenceElement,\n closeCalendar,\n handleSetTriggerRef,\n handleToggleCalendar,\n handleMenuWrapperKeyDown,\n }),\n [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, referenceElement],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAA2D;AAE3D,yCAAgD;AAgBzC,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkD;AAChD,QAAM,EAAE,YAAY,2BAA2B,IAAI;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,eAAe,SAAS;AAAA,IAE/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAmC,IAAI;AAKvF,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,mBAAoB;AACxB,iBAAa;AAAA,EACf,GAAG,CAAC,oBAAoB,YAAY,CAAC;AAErC,QAAM,mBAAe,0BAAY,MAAM;AACrC,QAAI,SAAU;AACd,QAAI,WAAY,kCAAiC;AAAA,QAC5C,YAAW,MAAM,4BAA4B,CAAC;AACnD,oBAAgB,IAAI;AACpB,uBAAmB;AAAA,EACrB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,oBAAgB,0BAAY,MAAM;AACtC,oBAAgB,KAAK;AACrB,QAAI,CAAC,mBAAoB,eAAc;AACvC,+BAA2B;AAC3B,qBAAiB;AACjB,mBAAe;AAAA,EACjB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,UAAM,YAAY,CAAC;AACnB,QAAI,UAAW,cAAa;AAAA,QACvB,eAAc;AAAA,EACrB,GAAG,CAAC,eAAe,cAAc,YAAY,CAAC;AAE9C,QAAM,0BAAsB;AAAA,IAC1B,CAAC,WAA8B;AAC7B,sBAAgB,UAAU;AAC1B,0BAAoB,MAAM;AAC1B,UAAI,4BAA4B,iBAAiB,uBAAuB,mBAAoB,SAAQ,MAAM;AAAA,IAC5G;AAAA,IACA,CAAC,oBAAoB,yBAAyB,eAAe;AAAA,EAC/D;AACA,QAAM,+BAA2B;AAAA,IAC/B,CAAC,MAAwC;AACvC,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,QAAQ,UAAU;AACpB,sBAAc;AACd,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,eAAe,gBAAgB;AAAA,EAClC;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,eAAe,0BAA0B,qBAAqB,sBAAsB,gBAAgB;AAAA,EACvG;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -45,9 +45,10 @@ const PickersIcons = () => {
|
|
|
45
45
|
hideTimePicker,
|
|
46
46
|
hideDateTimePicker,
|
|
47
47
|
isControllerOnly,
|
|
48
|
+
getProps,
|
|
48
49
|
props: { hasError }
|
|
49
50
|
} = import_react.default.useContext(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
|
|
50
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledPickersIconsWrapperGrid, { hasError, isControllerOnly, children: [
|
|
51
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledPickersIconsWrapperGrid, { hasError, isControllerOnly, getOwnerProps: getProps, children: [
|
|
51
52
|
!hideDatePicker && hideTimePicker && hideDateTimePicker ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Calendar.Calendar, {}) : null,
|
|
52
53
|
hideDatePicker && !hideTimePicker && hideDateTimePicker ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeWheel.TimeWheel, {}) : null,
|
|
53
54
|
hideDatePicker && hideTimePicker && !hideDateTimePicker ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarWithTimeWheel.CalendarWithTimeWheel, {}) : null
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Pickers/PickersIcons.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { StyledPickersIconsWrapperGrid } from '../Styleds.js';\nimport { CalendarWithTimeWheel } from './CalendarWithTimeWheel/CalendarWithTimeWheel.js';\nimport { Calendar } from './Calendar/Calendar.js';\nimport { TimeWheel } from './TimeWheel/TimeWheel.js';\n\nexport const PickersIcons = (): JSX.Element => {\n const {\n hideDatePicker,\n hideTimePicker,\n hideDateTimePicker,\n isControllerOnly,\n props: { hasError },\n } = React.useContext(ControlledDateTimePickerContext);\n\n return (\n <StyledPickersIconsWrapperGrid hasError={hasError} isControllerOnly={isControllerOnly}>\n {!hideDatePicker && hideTimePicker && hideDateTimePicker ? <Calendar /> : null}\n {hideDatePicker && !hideTimePicker && hideDateTimePicker ? <TimeWheel /> : null}\n {hideDatePicker && hideTimePicker && !hideDateTimePicker ? <CalendarWithTimeWheel /> : null}\n </StyledPickersIconsWrapperGrid>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { StyledPickersIconsWrapperGrid } from '../Styleds.js';\nimport { CalendarWithTimeWheel } from './CalendarWithTimeWheel/CalendarWithTimeWheel.js';\nimport { Calendar } from './Calendar/Calendar.js';\nimport { TimeWheel } from './TimeWheel/TimeWheel.js';\n\nexport const PickersIcons = (): JSX.Element => {\n const {\n hideDatePicker,\n hideTimePicker,\n hideDateTimePicker,\n isControllerOnly,\n getProps,\n props: { hasError },\n } = React.useContext(ControlledDateTimePickerContext);\n\n return (\n <StyledPickersIconsWrapperGrid hasError={hasError} isControllerOnly={isControllerOnly} getOwnerProps={getProps}>\n {!hideDatePicker && hideTimePicker && hideDateTimePicker ? <Calendar /> : null}\n {hideDatePicker && !hideTimePicker && hideDateTimePicker ? <TimeWheel /> : null}\n {hideDatePicker && hideTimePicker && !hideDateTimePicker ? <CalendarWithTimeWheel /> : null}\n </StyledPickersIconsWrapperGrid>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAlBJ,mBAAkB;AAClB,yCAAgD;AAChD,qBAA8C;AAC9C,mCAAsC;AACtC,sBAAyB;AACzB,uBAA0B;AAEnB,MAAM,eAAe,MAAmB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,IAAI,aAAAA,QAAM,WAAW,kEAA+B;AAEpD,SACE,6CAAC,gDAA8B,UAAoB,kBAAoC,eAAe,UACnG;AAAA,KAAC,kBAAkB,kBAAkB,qBAAqB,4CAAC,4BAAS,IAAK;AAAA,IACzE,kBAAkB,CAAC,kBAAkB,qBAAqB,4CAAC,8BAAU,IAAK;AAAA,IAC1E,kBAAkB,kBAAkB,CAAC,qBAAqB,4CAAC,sDAAsB,IAAK;AAAA,KACzF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -87,8 +87,8 @@ const HoursList = () => {
|
|
|
87
87
|
);
|
|
88
88
|
const hasDisabledStyles = readOnly || applyAriaDisabled;
|
|
89
89
|
const arrowColor = !hasDisabledStyles ? ["brand-primary", "700"] : void 0;
|
|
90
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledWheelList, { onFocus: handleWheelFocus, onBlur: handleWheelBlur, children: [
|
|
91
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledWheelList, { onFocus: handleWheelFocus, onBlur: handleWheelBlur, getOwnerProps: getProps, children: [
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
92
|
import_Styleds.StyledWheelChangeTimeBtn,
|
|
93
93
|
{
|
|
94
94
|
"aria-label": "subtract one hour",
|
|
@@ -107,7 +107,7 @@ const HoursList = () => {
|
|
|
107
107
|
) }),
|
|
108
108
|
visibleHours.map((hourString) => {
|
|
109
109
|
const key = `timewheel-hour-${hourString || ""}`;
|
|
110
|
-
if (!hourString) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, {}, key);
|
|
110
|
+
if (!hourString) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { getOwnerProps: getProps }, key);
|
|
111
111
|
const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;
|
|
112
112
|
const isEmptyCurrValueCurrentListItem = !hours && (0, import_numberHelpers.convertToPositiveNumberIfPossible)(hourString) === currHourNum;
|
|
113
113
|
const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || hours === hourString;
|
|
@@ -129,7 +129,7 @@ const HoursList = () => {
|
|
|
129
129
|
onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrHourOnKeyDown : void 0,
|
|
130
130
|
innerRef: isTheItemVisuallyInTheCenter ? handleCurrYearRef : void 0
|
|
131
131
|
};
|
|
132
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
133
133
|
import_Styleds.StyledTimeBtn,
|
|
134
134
|
{
|
|
135
135
|
$isTheItemVisuallyInTheCenter: isTheItemVisuallyInTheCenter,
|
|
@@ -148,7 +148,7 @@ const HoursList = () => {
|
|
|
148
148
|
}
|
|
149
149
|
) }, key);
|
|
150
150
|
}),
|
|
151
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
151
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
152
152
|
import_Styleds.StyledWheelChangeTimeBtn,
|
|
153
153
|
{
|
|
154
154
|
"aria-label": "add one hour",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/TimeWheel/HoursList.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nexport const HoursList = (): JSX.Element => {\n const {\n currHourNum,\n currMinuteNum,\n currMeridiem,\n visibleHours,\n handlePrevHour,\n handleNextHour,\n handleTimeWheelBtnChangeHours,\n handleCurrHourOnKeyDown,\n } = useContext(TimeWheelContext);\n const {\n prevHourBtnRef,\n currHourBtnRef,\n nextHourBtnRef,\n getIsDisabledTime,\n autoFocusHourTimeWheel,\n hours,\n latestInteractionRegion,\n currFocusDescriber,\n trackFocusTimewheelCurrHour,\n getProps,\n props: { readOnly, applyAriaDisabled },\n } = useContext(ControlledDateTimePickerContext);\n\n const handleCurrYearRef = useCallback(\n (ButtonDomNode: HTMLDivElement) => {\n setTimeout(() => {\n currHourBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n ButtonDomNode?.focus?.();\n });\n },\n [currFocusDescriber, latestInteractionRegion, currHourBtnRef],\n );\n\n const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n\n const handleWheelFocus = useCallback(() => {\n setIsFocusedWheel(true);\n trackFocusTimewheelCurrHour();\n }, [setIsFocusedWheel, trackFocusTimewheelCurrHour]);\n\n const handleWheelBlur = useCallback(\n (e: React.FocusEvent<HTMLDivElement>) => {\n if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n },\n [setIsFocusedWheel],\n );\n\n const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n return (\n <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur}>\n <StyledWheelListItem>\n <StyledWheelChangeTimeBtn\n aria-label=\"subtract one hour\"\n buttonType=\"raw\"\n size=\"m\"\n onClick={handlePrevHour}\n innerRef={prevHourBtnRef}\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getProps}\n tabIndex={-1}\n type=\"button\"\n >\n <ChevronSmallUp color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n {visibleHours.map((hourString) => {\n const key = `timewheel-hour-${hourString || ''}`;\n if (!hourString) return <StyledWheelListItem key={key} />;\n const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;\n\n const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || hours === hourString;\n const isNotAValidSelection = getIsDisabledTime(currHourTimeString);\n const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;\n const isSelected = hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n const btnProps = {\n role: 'spinbutton',\n ...(isSelected && {\n 'aria-valuenow': convertToPositiveNumberIfPossible(hourString),\n 'aria-valuetext': `${hourString} hours`,\n }),\n 'aria-valuemin': 1,\n 'aria-valuemax': 12,\n 'aria-label': `${hourString} hours`,\n 'aria-disabled': readOnly || applyAriaDisabled,\n 'aria-invalid': isNotAValidSelection,\n 'aria-readonly': readOnly || applyAriaDisabled,\n onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrHourOnKeyDown : undefined,\n innerRef: isTheItemVisuallyInTheCenter ? handleCurrYearRef : undefined,\n };\n return (\n <StyledWheelListItem key={key}>\n <StyledTimeBtn\n $isTheItemVisuallyInTheCenter={isTheItemVisuallyInTheCenter}\n $isNotAValidSelection={isNotAValidSelection}\n $selected={isSelected}\n $isUnset={!hours}\n $readOnly={readOnly || applyAriaDisabled}\n $isFocusedWheel={isFocusedWheel}\n autoFocus={autoFocusHourTimeWheel && isTheItemVisuallyInTheCenter}\n data-testid={\n ControlledDateTimePickerDatatestid.TIMEWHEEL[isTheItemVisuallyInTheCenter ? 'CURRENT_HOUR' : 'HOUR']\n }\n onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n handleTimeWheelBtnChangeHours(hourString, e)\n }\n tabIndex={tabIndex}\n {...btnProps}\n getOwnerProps={getProps}\n >\n {hourString}\n </StyledTimeBtn>\n </StyledWheelListItem>\n );\n })}\n <StyledWheelListItem>\n <StyledWheelChangeTimeBtn\n aria-label=\"add one hour\"\n buttonType=\"raw\"\n size=\"m\"\n onClick={handleNextHour}\n innerRef={nextHourBtnRef}\n tabIndex={-1}\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getProps}\n type=\"button\"\n >\n <ChevronSmallDown color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n </StyledWheelList>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DnB;AA9DJ,sBAAgE;AAChE,mBAAyD;AACzD,uBAAmD;AACnD,yCAAgD;AAChD,2BAAkD;AAClD,qBAA8F;AAC9F,8BAAiC;AAE1B,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,QAAI,yBAAW,kEAA+B;AAE9C,QAAM,wBAAoB;AAAA,IACxB,CAAC,kBAAkC;AACjC,iBAAW,MAAM;AACf,uBAAe,UAAU;AACzB,YAAI,4BAA4B,eAAe,uBAAuB;AACpE,yBAAe,QAAQ;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,yBAAyB,cAAc;AAAA,EAC9D;AAEA,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAE1D,QAAM,uBAAmB,0BAAY,MAAM;AACzC,sBAAkB,IAAI;AACtB,gCAA4B;AAAA,EAC9B,GAAG,CAAC,mBAAmB,2BAA2B,CAAC;AAEnD,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwC;AACvC,UAAI,CAAC,EAAE,cAAc,SAAS,EAAE,aAAqB,EAAG,mBAAkB,KAAK;AAAA,IACjF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,oBAAoB,YAAY;AAEtC,QAAM,aAAa,CAAC,oBAAqB,CAAC,iBAAiB,KAAK,IAA2B;AAC3F,SACE,6CAAC,kCAAgB,SAAS,kBAAkB,QAAQ,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nexport const HoursList = (): JSX.Element => {\n const {\n currHourNum,\n currMinuteNum,\n currMeridiem,\n visibleHours,\n handlePrevHour,\n handleNextHour,\n handleTimeWheelBtnChangeHours,\n handleCurrHourOnKeyDown,\n } = useContext(TimeWheelContext);\n const {\n prevHourBtnRef,\n currHourBtnRef,\n nextHourBtnRef,\n getIsDisabledTime,\n autoFocusHourTimeWheel,\n hours,\n latestInteractionRegion,\n currFocusDescriber,\n trackFocusTimewheelCurrHour,\n getProps,\n props: { readOnly, applyAriaDisabled },\n } = useContext(ControlledDateTimePickerContext);\n\n const handleCurrYearRef = useCallback(\n (ButtonDomNode: HTMLDivElement) => {\n setTimeout(() => {\n currHourBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n ButtonDomNode?.focus?.();\n });\n },\n [currFocusDescriber, latestInteractionRegion, currHourBtnRef],\n );\n\n const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n\n const handleWheelFocus = useCallback(() => {\n setIsFocusedWheel(true);\n trackFocusTimewheelCurrHour();\n }, [setIsFocusedWheel, trackFocusTimewheelCurrHour]);\n\n const handleWheelBlur = useCallback(\n (e: React.FocusEvent<HTMLDivElement>) => {\n if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n },\n [setIsFocusedWheel],\n );\n\n const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n return (\n <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur} getOwnerProps={getProps}>\n <StyledWheelListItem getOwnerProps={getProps}>\n <StyledWheelChangeTimeBtn\n aria-label=\"subtract one hour\"\n buttonType=\"raw\"\n size=\"m\"\n onClick={handlePrevHour}\n innerRef={prevHourBtnRef}\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getProps}\n tabIndex={-1}\n type=\"button\"\n >\n <ChevronSmallUp color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n {visibleHours.map((hourString) => {\n const key = `timewheel-hour-${hourString || ''}`;\n if (!hourString) return <StyledWheelListItem key={key} getOwnerProps={getProps} />;\n const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;\n\n const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || hours === hourString;\n const isNotAValidSelection = getIsDisabledTime(currHourTimeString);\n const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;\n const isSelected = hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n const btnProps = {\n role: 'spinbutton',\n ...(isSelected && {\n 'aria-valuenow': convertToPositiveNumberIfPossible(hourString),\n 'aria-valuetext': `${hourString} hours`,\n }),\n 'aria-valuemin': 1,\n 'aria-valuemax': 12,\n 'aria-label': `${hourString} hours`,\n 'aria-disabled': readOnly || applyAriaDisabled,\n 'aria-invalid': isNotAValidSelection,\n 'aria-readonly': readOnly || applyAriaDisabled,\n onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrHourOnKeyDown : undefined,\n innerRef: isTheItemVisuallyInTheCenter ? handleCurrYearRef : undefined,\n };\n return (\n <StyledWheelListItem key={key} getOwnerProps={getProps}>\n <StyledTimeBtn\n $isTheItemVisuallyInTheCenter={isTheItemVisuallyInTheCenter}\n $isNotAValidSelection={isNotAValidSelection}\n $selected={isSelected}\n $isUnset={!hours}\n $readOnly={readOnly || applyAriaDisabled}\n $isFocusedWheel={isFocusedWheel}\n autoFocus={autoFocusHourTimeWheel && isTheItemVisuallyInTheCenter}\n data-testid={\n ControlledDateTimePickerDatatestid.TIMEWHEEL[isTheItemVisuallyInTheCenter ? 'CURRENT_HOUR' : 'HOUR']\n }\n onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n handleTimeWheelBtnChangeHours(hourString, e)\n }\n tabIndex={tabIndex}\n {...btnProps}\n getOwnerProps={getProps}\n >\n {hourString}\n </StyledTimeBtn>\n </StyledWheelListItem>\n );\n })}\n <StyledWheelListItem getOwnerProps={getProps}>\n <StyledWheelChangeTimeBtn\n aria-label=\"add one hour\"\n buttonType=\"raw\"\n size=\"m\"\n onClick={handleNextHour}\n innerRef={nextHourBtnRef}\n tabIndex={-1}\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getProps}\n type=\"button\"\n >\n <ChevronSmallDown color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n </StyledWheelList>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -122,7 +122,7 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
|
|
|
122
122
|
const hasDisabledStyles = readOnly || applyAriaDisabled;
|
|
123
123
|
const arrowColor = !hasDisabledStyles ? ["brand-primary", "700"] : void 0;
|
|
124
124
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
125
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
125
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
126
126
|
import_Styleds.StyledWheelChangeTimeBtn,
|
|
127
127
|
{
|
|
128
128
|
"aria-label": "set am meridiem",
|
|
@@ -142,8 +142,8 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
|
|
|
142
142
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallUp, { color: arrowColor })
|
|
143
143
|
}
|
|
144
144
|
) }),
|
|
145
|
-
currMeridiem === "AM" || currMeridiem === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { "aria-hidden": "true" }) : null,
|
|
146
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
145
|
+
currMeridiem === "AM" || currMeridiem === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { "aria-hidden": "true", getOwnerProps: getProps }) : null,
|
|
146
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { "aria-hidden": "true", getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
147
147
|
import_Styleds.StyledTimeBtn,
|
|
148
148
|
{
|
|
149
149
|
$isTheItemVisuallyInTheCenter: isAmCurrent,
|
|
@@ -161,7 +161,7 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
|
|
|
161
161
|
children: "AM"
|
|
162
162
|
}
|
|
163
163
|
) }),
|
|
164
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
164
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { "aria-hidden": "true", getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
165
165
|
import_Styleds.StyledTimeBtn,
|
|
166
166
|
{
|
|
167
167
|
$isTheItemVisuallyInTheCenter: isPmCurrent,
|
|
@@ -179,8 +179,8 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
|
|
|
179
179
|
children: "PM"
|
|
180
180
|
}
|
|
181
181
|
) }),
|
|
182
|
-
currMeridiem === "PM" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { "aria-hidden": "true" }) : null,
|
|
183
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
182
|
+
currMeridiem === "PM" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { "aria-hidden": "true", getOwnerProps: getProps }) : null,
|
|
183
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
184
184
|
import_Styleds.StyledWheelChangeTimeBtn,
|
|
185
185
|
{
|
|
186
186
|
"aria-label": "set pm meridiem",
|
|
@@ -204,7 +204,7 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
|
|
|
204
204
|
};
|
|
205
205
|
const MeridiemList = () => {
|
|
206
206
|
const [isFocusedWheel, setIsFocusedWheel] = (0, import_react.useState)(false);
|
|
207
|
-
const { trackFocusTimewheelCurrMeridiem } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
|
|
207
|
+
const { trackFocusTimewheelCurrMeridiem, getProps } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
|
|
208
208
|
const handleWheelFocus = (0, import_react.useCallback)(() => {
|
|
209
209
|
setIsFocusedWheel(true);
|
|
210
210
|
trackFocusTimewheelCurrMeridiem();
|
|
@@ -215,7 +215,7 @@ const MeridiemList = () => {
|
|
|
215
215
|
},
|
|
216
216
|
[setIsFocusedWheel]
|
|
217
217
|
);
|
|
218
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledWheelList, { onFocus: handleWheelFocus, onBlur: handleWheelBlur, children: [
|
|
218
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledWheelList, { onFocus: handleWheelFocus, onBlur: handleWheelBlur, getOwnerProps: getProps, children: [
|
|
219
219
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MeridiemA11yLayer, {}),
|
|
220
220
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MeridiemVisualLayer, { isFocusedWheel })
|
|
221
221
|
] });
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/TimeWheel/MeridiemList.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nconst srOnlyStyle: React.CSSProperties = {\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: 0,\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n border: 0,\n pointerEvents: 'none',\n};\n\n/**\n * A11y layer: the true semantic contract for screen readers and keyboard users.\n * It is visually hidden and pointer-event-free \u2014 it exists solely to provide a\n * valid, focused listbox with two options that AT can read and keyboard can operate.\n * The visual layer below is fully aria-hidden; this layer is the single source of\n * truth for all assistive technology interaction.\n */\nconst MeridiemA11yLayer = (): JSX.Element => {\n const { currMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n const {\n currMeridiemBtnRef,\n meridiem,\n instanceUid,\n latestInteractionRegion,\n currFocusDescriber,\n getIsDisabledTime,\n hours,\n minutes,\n props: { readOnly, applyAriaDisabled },\n } = useContext(ControlledDateTimePickerContext);\n\n const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n const amId = `${instanceUid}-meridiem-am`;\n const pmId = `${instanceUid}-meridiem-pm`;\n const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n const isCurrentMeridiemInvalid = isAmCurrent\n ? getIsDisabledTime(`${hourMinuteString} AM`)\n : getIsDisabledTime(`${hourMinuteString} PM`);\n\n const handleListboxRef = useCallback(\n (listboxDomNode: HTMLDivElement) => {\n setTimeout(() => {\n currMeridiemBtnRef.current = listboxDomNode;\n if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n listboxDomNode?.focus?.();\n });\n },\n [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n );\n\n return (\n <div\n role=\"listbox\"\n aria-label=\"Meridiem\"\n aria-orientation=\"vertical\"\n aria-disabled={readOnly || applyAriaDisabled}\n aria-invalid={isCurrentMeridiemInvalid}\n aria-activedescendant={isAmCurrent ? amId : pmId}\n tabIndex={0}\n onKeyDown={handleCurrMeridiemOnKeyDown}\n ref={handleListboxRef}\n style={srOnlyStyle}\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MERIDIEM}\n >\n <div role=\"option\" id={amId} aria-selected={meridiem === 'AM'}>\n AM\n </div>\n <div role=\"option\" id={pmId} aria-selected={meridiem === 'PM'}>\n PM\n </div>\n </div>\n );\n};\n\n/**\n * Visual layer: the presentation surface that mouse users see and interact with.\n * All elements are aria-hidden \u2014 AT never reaches this layer. The chevron buttons\n * and AM/PM items are click-only affordances; on click they update state and redirect\n * focus to the a11y layer above so keyboard can continue from there. No ARIA roles,\n * labels, or keyboard handlers live here.\n */\nconst MeridiemVisualLayer = ({ isFocusedWheel }: { isFocusedWheel: boolean }): JSX.Element => {\n const { currMeridiem, handleTimeWheelBtnChangeMeridiem } = useContext(TimeWheelContext);\n const {\n prevMeridiemBtnRef,\n currMeridiemBtnRef,\n nextMeridiemBtnRef,\n getIsDisabledTime,\n hours,\n minutes,\n meridiem,\n getProps,\n props: { readOnly, applyAriaDisabled },\n } = useContext(ControlledDateTimePickerContext);\n\n const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n const isPmCurrent = currMeridiem === 'PM';\n const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n const isNotAValidAm = getIsDisabledTime(`${hourMinuteString} AM`);\n const isNotAValidPm = getIsDisabledTime(`${hourMinuteString} PM`);\n\n const hasDisabledStyles = readOnly || applyAriaDisabled;\n const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n\n return (\n <>\n <StyledWheelListItem>\n <StyledWheelChangeTimeBtn\n aria-label=\"set am meridiem\"\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM}\n buttonType=\"raw\"\n size=\"m\"\n onClick={(e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n handleTimeWheelBtnChangeMeridiem('AM', e);\n currMeridiemBtnRef.current?.focus();\n }}\n innerRef={prevMeridiemBtnRef}\n tabIndex={-1}\n type=\"button\"\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getProps}\n >\n <ChevronSmallUp color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n {currMeridiem === 'AM' || currMeridiem === '' ? <StyledWheelListItem aria-hidden=\"true\"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DnB;AA7DJ,sBAAgE;AAChE,mBAAyD;AACzD,uBAAmD;AACnD,yCAAgD;AAChD,qBAA8F;AAC9F,8BAAiC;AAEjC,MAAM,cAAmC;AAAA,EACvC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,eAAe;AACjB;AASA,MAAM,oBAAoB,MAAmB;AAC3C,QAAM,EAAE,cAAc,4BAA4B,QAAI,yBAAW,wCAAgB;AACjF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,QAAI,yBAAW,kEAA+B;AAE9C,QAAM,cAAc,CAAC,gBAAgB,iBAAiB;AACtD,QAAM,OAAO,GAAG,WAAW;AAC3B,QAAM,OAAO,GAAG,WAAW;AAC3B,QAAM,mBAAmB,GAAG,SAAS,IAAI,IAAI,WAAW,IAAI;AAC5D,QAAM,2BAA2B,cAC7B,kBAAkB,GAAG,gBAAgB,KAAK,IAC1C,kBAAkB,GAAG,gBAAgB,KAAK;AAE9C,QAAM,uBAAmB;AAAA,IACvB,CAAC,mBAAmC;AAClC,iBAAW,MAAM;AACf,2BAAmB,UAAU;AAC7B,YAAI,4BAA4B,eAAe,uBAAuB;AACpE,0BAAgB,QAAQ;AAAA,MAC5B,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,yBAAyB,kBAAkB;AAAA,EAClE;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,oBAAiB;AAAA,MACjB,iBAAe,YAAY;AAAA,MAC3B,gBAAc;AAAA,MACd,yBAAuB,cAAc,OAAO;AAAA,MAC5C,UAAU;AAAA,MACV,WAAW;AAAA,MACX,KAAK;AAAA,MACL,OAAO;AAAA,MACP,eAAa,oDAAmC,UAAU;AAAA,MAE1D;AAAA,oDAAC,SAAI,MAAK,UAAS,IAAI,MAAM,iBAAe,aAAa,MAAM,gBAE/D;AAAA,QACA,4CAAC,SAAI,MAAK,UAAS,IAAI,MAAM,iBAAe,aAAa,MAAM,gBAE/D;AAAA;AAAA;AAAA,EACF;AAEJ;AASA,MAAM,sBAAsB,CAAC,EAAE,eAAe,MAAgD;AAC5F,QAAM,EAAE,cAAc,iCAAiC,QAAI,yBAAW,wCAAgB;AACtF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,QAAI,yBAAW,kEAA+B;AAE9C,QAAM,cAAc,CAAC,gBAAgB,iBAAiB;AACtD,QAAM,cAAc,iBAAiB;AACrC,QAAM,mBAAmB,GAAG,SAAS,IAAI,IAAI,WAAW,IAAI;AAC5D,QAAM,gBAAgB,kBAAkB,GAAG,gBAAgB,KAAK;AAChE,QAAM,gBAAgB,kBAAkB,GAAG,gBAAgB,KAAK;AAEhE,QAAM,oBAAoB,YAAY;AACtC,QAAM,aAAa,CAAC,oBAAqB,CAAC,iBAAiB,KAAK,IAA2B;AAE3F,SACE,4EACE;AAAA,gDAAC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nconst srOnlyStyle: React.CSSProperties = {\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: 0,\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n border: 0,\n pointerEvents: 'none',\n};\n\n/**\n * A11y layer: the true semantic contract for screen readers and keyboard users.\n * It is visually hidden and pointer-event-free \u2014 it exists solely to provide a\n * valid, focused listbox with two options that AT can read and keyboard can operate.\n * The visual layer below is fully aria-hidden; this layer is the single source of\n * truth for all assistive technology interaction.\n */\nconst MeridiemA11yLayer = (): JSX.Element => {\n const { currMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n const {\n currMeridiemBtnRef,\n meridiem,\n instanceUid,\n latestInteractionRegion,\n currFocusDescriber,\n getIsDisabledTime,\n hours,\n minutes,\n props: { readOnly, applyAriaDisabled },\n } = useContext(ControlledDateTimePickerContext);\n\n const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n const amId = `${instanceUid}-meridiem-am`;\n const pmId = `${instanceUid}-meridiem-pm`;\n const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n const isCurrentMeridiemInvalid = isAmCurrent\n ? getIsDisabledTime(`${hourMinuteString} AM`)\n : getIsDisabledTime(`${hourMinuteString} PM`);\n\n const handleListboxRef = useCallback(\n (listboxDomNode: HTMLDivElement) => {\n setTimeout(() => {\n currMeridiemBtnRef.current = listboxDomNode;\n if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n listboxDomNode?.focus?.();\n });\n },\n [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n );\n\n return (\n <div\n role=\"listbox\"\n aria-label=\"Meridiem\"\n aria-orientation=\"vertical\"\n aria-disabled={readOnly || applyAriaDisabled}\n aria-invalid={isCurrentMeridiemInvalid}\n aria-activedescendant={isAmCurrent ? amId : pmId}\n tabIndex={0}\n onKeyDown={handleCurrMeridiemOnKeyDown}\n ref={handleListboxRef}\n style={srOnlyStyle}\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MERIDIEM}\n >\n <div role=\"option\" id={amId} aria-selected={meridiem === 'AM'}>\n AM\n </div>\n <div role=\"option\" id={pmId} aria-selected={meridiem === 'PM'}>\n PM\n </div>\n </div>\n );\n};\n\n/**\n * Visual layer: the presentation surface that mouse users see and interact with.\n * All elements are aria-hidden \u2014 AT never reaches this layer. The chevron buttons\n * and AM/PM items are click-only affordances; on click they update state and redirect\n * focus to the a11y layer above so keyboard can continue from there. No ARIA roles,\n * labels, or keyboard handlers live here.\n */\nconst MeridiemVisualLayer = ({ isFocusedWheel }: { isFocusedWheel: boolean }): JSX.Element => {\n const { currMeridiem, handleTimeWheelBtnChangeMeridiem } = useContext(TimeWheelContext);\n const {\n prevMeridiemBtnRef,\n currMeridiemBtnRef,\n nextMeridiemBtnRef,\n getIsDisabledTime,\n hours,\n minutes,\n meridiem,\n getProps,\n props: { readOnly, applyAriaDisabled },\n } = useContext(ControlledDateTimePickerContext);\n\n const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n const isPmCurrent = currMeridiem === 'PM';\n const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n const isNotAValidAm = getIsDisabledTime(`${hourMinuteString} AM`);\n const isNotAValidPm = getIsDisabledTime(`${hourMinuteString} PM`);\n\n const hasDisabledStyles = readOnly || applyAriaDisabled;\n const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n\n return (\n <>\n <StyledWheelListItem getOwnerProps={getProps}>\n <StyledWheelChangeTimeBtn\n aria-label=\"set am meridiem\"\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM}\n buttonType=\"raw\"\n size=\"m\"\n onClick={(e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n handleTimeWheelBtnChangeMeridiem('AM', e);\n currMeridiemBtnRef.current?.focus();\n }}\n innerRef={prevMeridiemBtnRef}\n tabIndex={-1}\n type=\"button\"\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getProps}\n >\n <ChevronSmallUp color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n {currMeridiem === 'AM' || currMeridiem === '' ? (\n <StyledWheelListItem aria-hidden=\"true\" getOwnerProps={getProps} />\n ) : null}\n <StyledWheelListItem aria-hidden=\"true\" getOwnerProps={getProps}>\n <StyledTimeBtn\n $isTheItemVisuallyInTheCenter={isAmCurrent}\n $isNotAValidSelection={isNotAValidAm}\n $selected={isAmCurrent && !!meridiem}\n $isUnset={!meridiem}\n $isFocusedWheel={isFocusedWheel}\n data-testid={\n ControlledDateTimePickerDatatestid.TIMEWHEEL[\n isAmCurrent ? 'CURRENT_MERIDIEM_VISUAL_ELEMENT' : 'MERIDIEM_VISUAL_ELEMENT'\n ]\n }\n onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n handleTimeWheelBtnChangeMeridiem('AM', e);\n currMeridiemBtnRef.current?.focus();\n }}\n getOwnerProps={getProps}\n $readOnly={readOnly || applyAriaDisabled}\n >\n AM\n </StyledTimeBtn>\n </StyledWheelListItem>\n <StyledWheelListItem aria-hidden=\"true\" getOwnerProps={getProps}>\n <StyledTimeBtn\n $isTheItemVisuallyInTheCenter={isPmCurrent}\n $selected={isPmCurrent && !!meridiem}\n $isNotAValidSelection={isNotAValidPm}\n $isUnset={!meridiem}\n $isFocusedWheel={isFocusedWheel}\n data-testid={\n ControlledDateTimePickerDatatestid.TIMEWHEEL[\n isPmCurrent ? 'CURRENT_MERIDIEM_VISUAL_ELEMENT' : 'MERIDIEM_VISUAL_ELEMENT'\n ]\n }\n onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n handleTimeWheelBtnChangeMeridiem('PM', e);\n currMeridiemBtnRef.current?.focus();\n }}\n getOwnerProps={getProps}\n $readOnly={readOnly || applyAriaDisabled}\n >\n PM\n </StyledTimeBtn>\n </StyledWheelListItem>\n {currMeridiem === 'PM' ? <StyledWheelListItem aria-hidden=\"true\" getOwnerProps={getProps} /> : null}\n <StyledWheelListItem getOwnerProps={getProps}>\n <StyledWheelChangeTimeBtn\n aria-label=\"set pm meridiem\"\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM}\n buttonType=\"raw\"\n size=\"m\"\n onClick={(e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n handleTimeWheelBtnChangeMeridiem('PM', e);\n currMeridiemBtnRef.current?.focus();\n }}\n innerRef={nextMeridiemBtnRef}\n tabIndex={-1}\n type=\"button\"\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getProps}\n >\n <ChevronSmallDown color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n </>\n );\n};\n\nexport const MeridiemList = (): JSX.Element => {\n const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n const { trackFocusTimewheelCurrMeridiem, getProps } = useContext(ControlledDateTimePickerContext);\n\n const handleWheelFocus = useCallback(() => {\n setIsFocusedWheel(true);\n trackFocusTimewheelCurrMeridiem();\n }, [setIsFocusedWheel, trackFocusTimewheelCurrMeridiem]);\n\n const handleWheelBlur = useCallback(\n (e: React.FocusEvent<HTMLDivElement>) => {\n if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n },\n [setIsFocusedWheel],\n );\n\n return (\n <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur} getOwnerProps={getProps}>\n <MeridiemA11yLayer />\n <MeridiemVisualLayer isFocusedWheel={isFocusedWheel} />\n </StyledWheelList>\n );\n};\n\nexport default MeridiemList;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -87,8 +87,8 @@ const MinutesList = () => {
|
|
|
87
87
|
);
|
|
88
88
|
const hasDisabledStyles = readOnly || applyAriaDisabled;
|
|
89
89
|
const arrowColor = !hasDisabledStyles ? ["brand-primary", "700"] : void 0;
|
|
90
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledWheelList, { onFocus: handleWheelFocus, onBlur: handleWheelBlur, children: [
|
|
91
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledWheelList, { onFocus: handleWheelFocus, onBlur: handleWheelBlur, getOwnerProps: getProps, children: [
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
92
|
import_Styleds.StyledWheelChangeTimeBtn,
|
|
93
93
|
{
|
|
94
94
|
"aria-label": "subtract one minute",
|
|
@@ -107,7 +107,7 @@ const MinutesList = () => {
|
|
|
107
107
|
) }),
|
|
108
108
|
visibleMinutes.map((minutesString) => {
|
|
109
109
|
const key = `timewheel-minutes-${minutesString || ""}`;
|
|
110
|
-
if (!minutesString) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, {}, key);
|
|
110
|
+
if (!minutesString) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { getOwnerProps: getProps }, key);
|
|
111
111
|
const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;
|
|
112
112
|
const isEmptyCurrValueCurrentListItem = !minutes && (0, import_numberHelpers.convertToPositiveNumberIfPossible)(minutesString) === currMinuteNum;
|
|
113
113
|
const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || minutes === minutesString;
|
|
@@ -129,7 +129,7 @@ const MinutesList = () => {
|
|
|
129
129
|
onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrMinutesOnKeyDown : void 0,
|
|
130
130
|
innerRef: isTheItemVisuallyInTheCenter ? handleCurrMeridiemRef : void 0
|
|
131
131
|
};
|
|
132
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
133
133
|
import_Styleds.StyledTimeBtn,
|
|
134
134
|
{
|
|
135
135
|
$isTheItemVisuallyInTheCenter: isTheItemVisuallyInTheCenter,
|
|
@@ -148,7 +148,7 @@ const MinutesList = () => {
|
|
|
148
148
|
}
|
|
149
149
|
) }, key);
|
|
150
150
|
}),
|
|
151
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
151
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
152
152
|
import_Styleds.StyledWheelChangeTimeBtn,
|
|
153
153
|
{
|
|
154
154
|
"aria-label": "add one minute",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/TimeWheel/MinutesList.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nexport const MinutesList = (): JSX.Element => {\n const {\n currHourNum,\n currMinuteNum,\n currMeridiem,\n visibleMinutes,\n handlePrevMinute,\n handleNextMinute,\n handleTimeWheelBtnChangeMinutes,\n handleCurrMinutesOnKeyDown,\n } = useContext(TimeWheelContext);\n const {\n prevMinutesBtnRef,\n currMinutesBtnRef,\n nextMinutesBtnRef,\n getIsDisabledTime,\n minutes,\n currFocusDescriber,\n latestInteractionRegion,\n trackFocusTimewheelCurrMinute,\n getProps,\n props: { readOnly, applyAriaDisabled },\n } = useContext(ControlledDateTimePickerContext);\n\n const handleCurrMeridiemRef = useCallback(\n (ButtonDomNode: HTMLDivElement) => {\n setTimeout(() => {\n currMinutesBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute')\n ButtonDomNode?.focus?.();\n });\n },\n [currFocusDescriber, latestInteractionRegion, currMinutesBtnRef],\n );\n\n const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n\n const handleWheelFocus = useCallback(() => {\n setIsFocusedWheel(true);\n trackFocusTimewheelCurrMinute();\n }, [setIsFocusedWheel, trackFocusTimewheelCurrMinute]);\n\n const handleWheelBlur = useCallback(\n (e: React.FocusEvent<HTMLDivElement>) => {\n if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n },\n [setIsFocusedWheel],\n );\n\n const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n return (\n <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur}>\n <StyledWheelListItem>\n <StyledWheelChangeTimeBtn\n aria-label=\"subtract one minute\"\n buttonType=\"raw\"\n size=\"m\"\n onClick={handlePrevMinute}\n innerRef={prevMinutesBtnRef}\n tabIndex={-1}\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n type=\"button\"\n getOwnerProps={getProps}\n >\n <ChevronSmallUp color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n {visibleMinutes.map((minutesString) => {\n const key = `timewheel-minutes-${minutesString || ''}`;\n if (!minutesString) return <StyledWheelListItem key={key} />;\n const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;\n const isEmptyCurrValueCurrentListItem =\n !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n const isNotAValidSelection = getIsDisabledTime(currMinutesTimeString);\n\n const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;\n const isSelected = minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n const btnProps = {\n role: 'spinbutton',\n ...(isSelected && {\n 'aria-valuenow': convertToPositiveNumberIfPossible(minutesString),\n 'aria-valuetext': `${minutesString} minutes`,\n }),\n 'aria-label': `${minutesString} minutes`,\n 'aria-valuemin': 0,\n 'aria-valuemax': 59,\n 'aria-disabled': readOnly || applyAriaDisabled,\n 'aria-invalid': isNotAValidSelection,\n 'aria-readonly': readOnly || applyAriaDisabled,\n onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrMinutesOnKeyDown : undefined,\n innerRef: isTheItemVisuallyInTheCenter ? handleCurrMeridiemRef : undefined,\n };\n return (\n <StyledWheelListItem key={key}>\n <StyledTimeBtn\n $isTheItemVisuallyInTheCenter={isTheItemVisuallyInTheCenter}\n $isNotAValidSelection={isNotAValidSelection}\n $selected={isSelected}\n $isUnset={!minutes}\n $readOnly={readOnly || applyAriaDisabled}\n $isFocusedWheel={isFocusedWheel}\n data-testid={\n ControlledDateTimePickerDatatestid.TIMEWHEEL[isTheItemVisuallyInTheCenter ? 'CURRENT_MINUTE' : 'MINUTE']\n }\n onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n handleTimeWheelBtnChangeMinutes(minutesString, e)\n }\n tabIndex={tabIndex}\n type=\"button\"\n {...btnProps}\n getOwnerProps={getProps}\n >\n {minutesString}\n </StyledTimeBtn>\n </StyledWheelListItem>\n );\n })}\n <StyledWheelListItem>\n <StyledWheelChangeTimeBtn\n aria-label=\"add one minute\"\n buttonType=\"raw\"\n size=\"m\"\n onClick={handleNextMinute}\n innerRef={nextMinutesBtnRef}\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE}\n tabIndex={-1}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n type=\"button\"\n getOwnerProps={getProps}\n >\n <ChevronSmallDown color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n </StyledWheelList>\n );\n};\n\nexport default MinutesList;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DnB;AA7DJ,sBAAgE;AAChE,mBAAyD;AACzD,uBAAmD;AACnD,yCAAgD;AAChD,2BAAkD;AAClD,qBAA8F;AAC9F,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,QAAI,yBAAW,kEAA+B;AAE9C,QAAM,4BAAwB;AAAA,IAC5B,CAAC,kBAAkC;AACjC,iBAAW,MAAM;AACf,0BAAkB,UAAU;AAC5B,YAAI,4BAA4B,eAAe,uBAAuB;AACpE,yBAAe,QAAQ;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,yBAAyB,iBAAiB;AAAA,EACjE;AAEA,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAE1D,QAAM,uBAAmB,0BAAY,MAAM;AACzC,sBAAkB,IAAI;AACtB,kCAA8B;AAAA,EAChC,GAAG,CAAC,mBAAmB,6BAA6B,CAAC;AAErD,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwC;AACvC,UAAI,CAAC,EAAE,cAAc,SAAS,EAAE,aAAqB,EAAG,mBAAkB,KAAK;AAAA,IACjF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,oBAAoB,YAAY;AAEtC,QAAM,aAAa,CAAC,oBAAqB,CAAC,iBAAiB,KAAK,IAA2B;AAC3F,SACE,6CAAC,kCAAgB,SAAS,kBAAkB,QAAQ,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nexport const MinutesList = (): JSX.Element => {\n const {\n currHourNum,\n currMinuteNum,\n currMeridiem,\n visibleMinutes,\n handlePrevMinute,\n handleNextMinute,\n handleTimeWheelBtnChangeMinutes,\n handleCurrMinutesOnKeyDown,\n } = useContext(TimeWheelContext);\n const {\n prevMinutesBtnRef,\n currMinutesBtnRef,\n nextMinutesBtnRef,\n getIsDisabledTime,\n minutes,\n currFocusDescriber,\n latestInteractionRegion,\n trackFocusTimewheelCurrMinute,\n getProps,\n props: { readOnly, applyAriaDisabled },\n } = useContext(ControlledDateTimePickerContext);\n\n const handleCurrMeridiemRef = useCallback(\n (ButtonDomNode: HTMLDivElement) => {\n setTimeout(() => {\n currMinutesBtnRef.current = ButtonDomNode;\n if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute')\n ButtonDomNode?.focus?.();\n });\n },\n [currFocusDescriber, latestInteractionRegion, currMinutesBtnRef],\n );\n\n const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n\n const handleWheelFocus = useCallback(() => {\n setIsFocusedWheel(true);\n trackFocusTimewheelCurrMinute();\n }, [setIsFocusedWheel, trackFocusTimewheelCurrMinute]);\n\n const handleWheelBlur = useCallback(\n (e: React.FocusEvent<HTMLDivElement>) => {\n if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n },\n [setIsFocusedWheel],\n );\n\n const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n return (\n <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur} getOwnerProps={getProps}>\n <StyledWheelListItem getOwnerProps={getProps}>\n <StyledWheelChangeTimeBtn\n aria-label=\"subtract one minute\"\n buttonType=\"raw\"\n size=\"m\"\n onClick={handlePrevMinute}\n innerRef={prevMinutesBtnRef}\n tabIndex={-1}\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n type=\"button\"\n getOwnerProps={getProps}\n >\n <ChevronSmallUp color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n {visibleMinutes.map((minutesString) => {\n const key = `timewheel-minutes-${minutesString || ''}`;\n if (!minutesString) return <StyledWheelListItem key={key} getOwnerProps={getProps} />;\n const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;\n const isEmptyCurrValueCurrentListItem =\n !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n const isNotAValidSelection = getIsDisabledTime(currMinutesTimeString);\n\n const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;\n const isSelected = minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n const btnProps = {\n role: 'spinbutton',\n ...(isSelected && {\n 'aria-valuenow': convertToPositiveNumberIfPossible(minutesString),\n 'aria-valuetext': `${minutesString} minutes`,\n }),\n 'aria-label': `${minutesString} minutes`,\n 'aria-valuemin': 0,\n 'aria-valuemax': 59,\n 'aria-disabled': readOnly || applyAriaDisabled,\n 'aria-invalid': isNotAValidSelection,\n 'aria-readonly': readOnly || applyAriaDisabled,\n onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrMinutesOnKeyDown : undefined,\n innerRef: isTheItemVisuallyInTheCenter ? handleCurrMeridiemRef : undefined,\n };\n return (\n <StyledWheelListItem key={key} getOwnerProps={getProps}>\n <StyledTimeBtn\n $isTheItemVisuallyInTheCenter={isTheItemVisuallyInTheCenter}\n $isNotAValidSelection={isNotAValidSelection}\n $selected={isSelected}\n $isUnset={!minutes}\n $readOnly={readOnly || applyAriaDisabled}\n $isFocusedWheel={isFocusedWheel}\n data-testid={\n ControlledDateTimePickerDatatestid.TIMEWHEEL[isTheItemVisuallyInTheCenter ? 'CURRENT_MINUTE' : 'MINUTE']\n }\n onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n handleTimeWheelBtnChangeMinutes(minutesString, e)\n }\n tabIndex={tabIndex}\n type=\"button\"\n {...btnProps}\n getOwnerProps={getProps}\n >\n {minutesString}\n </StyledTimeBtn>\n </StyledWheelListItem>\n );\n })}\n <StyledWheelListItem getOwnerProps={getProps}>\n <StyledWheelChangeTimeBtn\n aria-label=\"add one minute\"\n buttonType=\"raw\"\n size=\"m\"\n onClick={handleNextMinute}\n innerRef={nextMinutesBtnRef}\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE}\n tabIndex={-1}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n type=\"button\"\n getOwnerProps={getProps}\n >\n <ChevronSmallDown color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n </StyledWheelList>\n );\n};\n\nexport default MinutesList;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DnB;AA7DJ,sBAAgE;AAChE,mBAAyD;AACzD,uBAAmD;AACnD,yCAAgD;AAChD,2BAAkD;AAClD,qBAA8F;AAC9F,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,QAAI,yBAAW,kEAA+B;AAE9C,QAAM,4BAAwB;AAAA,IAC5B,CAAC,kBAAkC;AACjC,iBAAW,MAAM;AACf,0BAAkB,UAAU;AAC5B,YAAI,4BAA4B,eAAe,uBAAuB;AACpE,yBAAe,QAAQ;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,yBAAyB,iBAAiB;AAAA,EACjE;AAEA,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAE1D,QAAM,uBAAmB,0BAAY,MAAM;AACzC,sBAAkB,IAAI;AACtB,kCAA8B;AAAA,EAChC,GAAG,CAAC,mBAAmB,6BAA6B,CAAC;AAErD,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwC;AACvC,UAAI,CAAC,EAAE,cAAc,SAAS,EAAE,aAAqB,EAAG,mBAAkB,KAAK;AAAA,IACjF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,oBAAoB,YAAY;AAEtC,QAAM,aAAa,CAAC,oBAAqB,CAAC,iBAAiB,KAAK,IAA2B;AAC3F,SACE,6CAAC,kCAAgB,SAAS,kBAAkB,QAAQ,iBAAiB,eAAe,UAClF;AAAA,gDAAC,sCAAoB,eAAe,UAClC;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAa,oDAAmC,UAAU;AAAA,QAC1D;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,sDAAC,kCAAe,OAAO,YAAY;AAAA;AAAA,IACrC,GACF;AAAA,IACC,eAAe,IAAI,CAAC,kBAAkB;AACrC,YAAM,MAAM,qBAAqB,iBAAiB,EAAE;AACpD,UAAI,CAAC,cAAe,QAAO,4CAAC,sCAA8B,eAAe,YAApB,GAA8B;AACnF,YAAM,wBAAwB,GAAG,WAAW,IAAI,aAAa,IAAI,YAAY;AAC7E,YAAM,kCACJ,CAAC,eAAW,wDAAkC,aAAa,MAAM;AACnE,YAAM,+BAA+B,mCAAmC,YAAY;AACpF,YAAM,uBAAuB,kBAAkB,qBAAqB;AAEpE,YAAM,WAAW,+BAA+B,IAAI;AACpD,YAAM,aAAa,QAAQ,WAAW,SAAK,wDAAkC,aAAa,MAAM;AAChG,YAAM,WAAW;AAAA,QACf,MAAM;AAAA,QACN,GAAI,cAAc;AAAA,UAChB,qBAAiB,wDAAkC,aAAa;AAAA,UAChE,kBAAkB,GAAG,aAAa;AAAA,QACpC;AAAA,QACA,cAAc,GAAG,aAAa;AAAA,QAC9B,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,iBAAiB,YAAY;AAAA,QAC7B,gBAAgB;AAAA,QAChB,iBAAiB,YAAY;AAAA,QAC7B,WAAW,+BAA+B,6BAA6B;AAAA,QACvE,UAAU,+BAA+B,wBAAwB;AAAA,MACnE;AACA,aACE,4CAAC,sCAA8B,eAAe,UAC5C;AAAA,QAAC;AAAA;AAAA,UACC,+BAA+B;AAAA,UAC/B,uBAAuB;AAAA,UACvB,WAAW;AAAA,UACX,UAAU,CAAC;AAAA,UACX,WAAW,YAAY;AAAA,UACvB,iBAAiB;AAAA,UACjB,eACE,oDAAmC,UAAU,+BAA+B,mBAAmB,QAAQ;AAAA,UAEzG,SAAS,CAAC,MACR,gCAAgC,eAAe,CAAC;AAAA,UAElD;AAAA,UACA,MAAK;AAAA,UACJ,GAAG;AAAA,UACJ,eAAe;AAAA,UAEd;AAAA;AAAA,MACH,KApBwB,GAqB1B;AAAA,IAEJ,CAAC;AAAA,IACD,4CAAC,sCAAoB,eAAe,UAClC;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,oDAAmC,UAAU;AAAA,QAC1D,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,sDAAC,oCAAiB,OAAO,YAAY;AAAA;AAAA,IACvC,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|