@elliemae/ds-form-date-time-picker 3.60.0-next.61 → 3.60.0-next.62
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/parts/Pickers/Calendar/Styleds.js +44 -18
- package/dist/cjs/parts/Pickers/Calendar/Styleds.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js +5 -3
- package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js +7 -4
- package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/Styleds.js +44 -18
- package/dist/esm/parts/Pickers/Calendar/Styleds.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/HoursList.js +5 -3
- package/dist/esm/parts/Pickers/TimeWheel/HoursList.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js +7 -4
- package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js.map +2 -2
- package/dist/types/parts/Pickers/Calendar/Styleds.d.ts +12 -11
- package/package.json +10 -10
|
@@ -46,7 +46,7 @@ var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
|
46
46
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
47
47
|
var import_ds_system = require("@elliemae/ds-system");
|
|
48
48
|
var import_constants = require("../../../constants/index.js");
|
|
49
|
-
const
|
|
49
|
+
const makeDiagonalLine = (getColor) => import_ds_system.css`
|
|
50
50
|
&:before {
|
|
51
51
|
position: absolute;
|
|
52
52
|
content: '';
|
|
@@ -55,9 +55,10 @@ const diagonalLine = import_ds_system.css`
|
|
|
55
55
|
height: 1px;
|
|
56
56
|
width: calc(100% + 4px);
|
|
57
57
|
transform: rotate(45deg);
|
|
58
|
-
background-color: ${
|
|
58
|
+
background-color: ${getColor};
|
|
59
59
|
}
|
|
60
60
|
`;
|
|
61
|
+
const diagonalLine = makeDiagonalLine(({ theme }) => theme.colors.neutral[500]);
|
|
61
62
|
const focusBorder = import_ds_system.css`
|
|
62
63
|
&:after {
|
|
63
64
|
position: absolute;
|
|
@@ -71,16 +72,16 @@ const focusBorder = import_ds_system.css`
|
|
|
71
72
|
`;
|
|
72
73
|
const backgroundDateRange = {
|
|
73
74
|
inRange: import_ds_system.css`
|
|
74
|
-
background-color: ${({ theme }) => theme.colors.brand[
|
|
75
|
-
box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[
|
|
75
|
+
background-color: ${({ theme }) => theme.colors.brand[100]};
|
|
76
|
+
box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[100]};
|
|
76
77
|
`,
|
|
77
78
|
startRange: import_ds_system.css`
|
|
78
|
-
background-color: ${({ theme }) => theme.colors.brand[
|
|
79
|
+
background-color: ${({ theme }) => theme.colors.brand[100]};
|
|
79
80
|
border-radius: 50% 0 0 50%;
|
|
80
|
-
box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[
|
|
81
|
+
box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[100]};
|
|
81
82
|
`,
|
|
82
83
|
endRange: import_ds_system.css`
|
|
83
|
-
background-color: ${({ theme }) => theme.colors.brand[
|
|
84
|
+
background-color: ${({ theme }) => theme.colors.brand[100]};
|
|
84
85
|
border-radius: 0 50% 50% 0;
|
|
85
86
|
`
|
|
86
87
|
};
|
|
@@ -348,7 +349,9 @@ const StyledWeekDaysListWrapper = (0, import_ds_system.styled)(import_ds_grid.Gr
|
|
|
348
349
|
/* ─────────────────────────────────────────────────────────────────
|
|
349
350
|
READONLY REST STATES
|
|
350
351
|
───────────────────────────────────────────────────────────────── */
|
|
351
|
-
.dayWrapper.selectedDay.readOnly
|
|
352
|
+
.dayWrapper.selectedDay.readOnly,
|
|
353
|
+
.dayWrapper.startRangeDay.readOnly,
|
|
354
|
+
.dayWrapper.endRangeDay.readOnly {
|
|
352
355
|
${StyledDayBtn} {
|
|
353
356
|
background-color: ${({ theme }) => theme.colors.neutral["500"]};
|
|
354
357
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
@@ -388,13 +391,15 @@ const StyledWeekDaysListWrapper = (0, import_ds_system.styled)(import_ds_grid.Gr
|
|
|
388
391
|
}
|
|
389
392
|
|
|
390
393
|
.dayWrapper.selectedDay.disabledDay.readOnly,
|
|
391
|
-
.dayWrapper.selectedDay.outOfRangeDay.readOnly
|
|
394
|
+
.dayWrapper.selectedDay.outOfRangeDay.readOnly,
|
|
395
|
+
.dayWrapper.startRangeDay.disabledDay.readOnly,
|
|
396
|
+
.dayWrapper.startRangeDay.outOfRangeDay.readOnly,
|
|
397
|
+
.dayWrapper.endRangeDay.disabledDay.readOnly,
|
|
398
|
+
.dayWrapper.endRangeDay.outOfRangeDay.readOnly {
|
|
392
399
|
${StyledDayBtn} {
|
|
393
400
|
background-color: ${({ theme }) => theme.colors.neutral["500"]};
|
|
394
401
|
color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
395
|
-
|
|
396
|
-
background-color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
397
|
-
}
|
|
402
|
+
${makeDiagonalLine(({ theme }) => theme.colors.neutral["000"])}
|
|
398
403
|
&:hover {
|
|
399
404
|
background-color: ${({ theme }) => theme.colors.neutral["700"]};
|
|
400
405
|
}
|
|
@@ -404,6 +409,29 @@ const StyledWeekDaysListWrapper = (0, import_ds_system.styled)(import_ds_grid.Gr
|
|
|
404
409
|
}
|
|
405
410
|
}
|
|
406
411
|
|
|
412
|
+
.dayWrapper.inRangeDay.readOnly {
|
|
413
|
+
background-color: ${({ theme }) => theme.colors.neutral["100"]};
|
|
414
|
+
box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.neutral["100"]};
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.dayWrapper.inRangeDay.disabledDay.readOnly,
|
|
418
|
+
.dayWrapper.inRangeDay.outOfRangeDay.readOnly {
|
|
419
|
+
${StyledDayBtn} {
|
|
420
|
+
background-color: transparent;
|
|
421
|
+
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
422
|
+
${makeDiagonalLine(({ theme }) => theme.colors.neutral[700])}
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.dayWrapper.startRangeDay.inRangeImproperDay.readOnly {
|
|
427
|
+
background-color: ${({ theme }) => theme.colors.neutral["100"]};
|
|
428
|
+
box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.neutral["100"]};
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.dayWrapper.endRangeDay.inRangeImproperDay.readOnly {
|
|
432
|
+
background-color: ${({ theme }) => theme.colors.neutral["100"]};
|
|
433
|
+
}
|
|
434
|
+
|
|
407
435
|
/* ─────────────────────────────────────────────────────────────────
|
|
408
436
|
NOT CURRENT MONTH
|
|
409
437
|
───────────────────────────────────────────────────────────────── */
|
|
@@ -450,16 +478,14 @@ const StyledWeekDaysListWrapper = (0, import_ds_system.styled)(import_ds_grid.Gr
|
|
|
450
478
|
&.disabledDay,
|
|
451
479
|
&.outOfRangeDay {
|
|
452
480
|
${StyledDayBtn} {
|
|
453
|
-
color:
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
background-color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
457
|
-
}
|
|
481
|
+
background-color: transparent;
|
|
482
|
+
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
483
|
+
${makeDiagonalLine(({ theme }) => theme.colors.neutral[700])}
|
|
458
484
|
}
|
|
459
485
|
&.focusedDay {
|
|
460
486
|
${StyledDayBtn} {
|
|
461
487
|
&:after {
|
|
462
|
-
border-color: ${({ theme }) => theme.colors.
|
|
488
|
+
border-color: ${({ theme }) => theme.colors.brand[700]};
|
|
463
489
|
}
|
|
464
490
|
}
|
|
465
491
|
}
|
|
@@ -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 } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\n// Diagonal line for disabled / out-of-range days \u2014 neutral-500, position only.\nconst diagonalLine = 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: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\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[200]};\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n `,\n startRange: css`\n background-color: ${({ theme }) => theme.colors.brand[200]};\n border-radius: 50% 0 0 50%;\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n `,\n endRange: css`\n background-color: ${({ theme }) => theme.colors.brand[200]};\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 ${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 ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.neutral['500']};\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\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 /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 color: ${({ theme }) => theme.colors.neutral['000']};\n background-color: ${({ theme }) => theme.colors.danger[900]};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n &.focusedDay {\n ${StyledDayBtn} {\n &:after {\n border-color: ${({ theme }) => theme.colors.neutral['000']};\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,
|
|
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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -113,10 +113,13 @@ const HoursList = () => {
|
|
|
113
113
|
const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || hours === hourString;
|
|
114
114
|
const isNotAValidSelection = getIsDisabledTime(currHourTimeString);
|
|
115
115
|
const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;
|
|
116
|
+
const isSelected = hours.length === 2 && (0, import_numberHelpers.convertToPositiveNumberIfPossible)(hourString) === currHourNum;
|
|
116
117
|
const btnProps = {
|
|
117
118
|
role: "spinbutton",
|
|
118
|
-
|
|
119
|
-
|
|
119
|
+
...isSelected && {
|
|
120
|
+
"aria-valuenow": (0, import_numberHelpers.convertToPositiveNumberIfPossible)(hourString),
|
|
121
|
+
"aria-valuetext": `${hourString} hours`
|
|
122
|
+
},
|
|
120
123
|
"aria-valuemin": 1,
|
|
121
124
|
"aria-valuemax": 12,
|
|
122
125
|
"aria-label": `${hourString} hours`,
|
|
@@ -126,7 +129,6 @@ const HoursList = () => {
|
|
|
126
129
|
onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrHourOnKeyDown : void 0,
|
|
127
130
|
innerRef: isTheItemVisuallyInTheCenter ? handleCurrYearRef : void 0
|
|
128
131
|
};
|
|
129
|
-
const isSelected = hours.length === 2 && (0, import_numberHelpers.convertToPositiveNumberIfPossible)(hourString) === currHourNum;
|
|
130
132
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledWheelListItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
131
133
|
import_Styleds.StyledTimeBtn,
|
|
132
134
|
{
|
|
@@ -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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 btnProps = {\n role: 'spinbutton',\n 'aria-valuenow': convertToPositiveNumberIfPossible(hourString),\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,iBAClD;AAAA,gDAAC,sCACC;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,oDAAmC,UAAU;AAAA,QAG1D,iBAAe,YAAY;AAAA,QAC3B,mBAAmB,qBAAqB;AAAA,QACxC,eAAe;AAAA,QACf,UAAU;AAAA,QACV,MAAK;AAAA,QAEL,sDAAC,kCAAe,OAAO,YAAY;AAAA;AAAA,IACrC,GACF;AAAA,IACC,aAAa,IAAI,CAAC,eAAe;AAChC,YAAM,MAAM,kBAAkB,cAAc,EAAE;AAC9C,UAAI,CAAC,WAAY,QAAO,4CAAC,wCAAyB,GAAK;AACvD,YAAM,qBAAqB,GAAG,UAAU,IAAI,aAAa,IAAI,YAAY;AAEzE,YAAM,kCAAkC,CAAC,aAAS,wDAAkC,UAAU,MAAM;AACpG,YAAM,+BAA+B,mCAAmC,UAAU;AAClF,YAAM,uBAAuB,kBAAkB,kBAAkB;AACjE,YAAM,WAAW,+BAA+B,IAAI;AACpD,YAAM,WAAW;AAAA,QACf,MAAM;AAAA,QACN,qBAAiB,wDAAkC,UAAU;AAAA,
|
|
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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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
|
}
|
|
@@ -113,12 +113,15 @@ const MinutesList = () => {
|
|
|
113
113
|
const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || minutes === minutesString;
|
|
114
114
|
const isNotAValidSelection = getIsDisabledTime(currMinutesTimeString);
|
|
115
115
|
const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;
|
|
116
|
+
const isSelected = minutes.length === 2 && (0, import_numberHelpers.convertToPositiveNumberIfPossible)(minutesString) === currMinuteNum;
|
|
116
117
|
const btnProps = {
|
|
117
118
|
role: "spinbutton",
|
|
118
|
-
|
|
119
|
-
|
|
119
|
+
...isSelected && {
|
|
120
|
+
"aria-valuenow": (0, import_numberHelpers.convertToPositiveNumberIfPossible)(minutesString),
|
|
121
|
+
"aria-valuetext": `${minutesString} minutes`
|
|
122
|
+
},
|
|
120
123
|
"aria-label": `${minutesString} minutes`,
|
|
121
|
-
"aria-valuemin":
|
|
124
|
+
"aria-valuemin": 0,
|
|
122
125
|
"aria-valuemax": 59,
|
|
123
126
|
"aria-disabled": readOnly || applyAriaDisabled,
|
|
124
127
|
"aria-invalid": isNotAValidSelection,
|
|
@@ -131,7 +134,7 @@ const MinutesList = () => {
|
|
|
131
134
|
{
|
|
132
135
|
$isTheItemVisuallyInTheCenter: isTheItemVisuallyInTheCenter,
|
|
133
136
|
$isNotAValidSelection: isNotAValidSelection,
|
|
134
|
-
$selected:
|
|
137
|
+
$selected: isSelected,
|
|
135
138
|
$isUnset: !minutes,
|
|
136
139
|
$readOnly: readOnly || applyAriaDisabled,
|
|
137
140
|
$isFocusedWheel: isFocusedWheel,
|
|
@@ -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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 btnProps = {\n role: 'spinbutton',\n 'aria-valuenow': convertToPositiveNumberIfPossible(minutesString),\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,iBAClD;AAAA,gDAAC,sCACC;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,QAG1D,iBAAe,YAAY;AAAA,QAC3B,mBAAmB,qBAAqB;AAAA,QACxC,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,wCAAyB,GAAK;AAC1D,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,WAAW;AAAA,QACf,MAAM;AAAA,QACN,qBAAiB,wDAAkC,aAAa;AAAA,
|
|
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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import { DSButtonV2 } from "@elliemae/ds-button-v2";
|
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { css, styled } from "@elliemae/ds-system";
|
|
5
5
|
import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../../../constants/index.js";
|
|
6
|
-
const
|
|
6
|
+
const makeDiagonalLine = (getColor) => css`
|
|
7
7
|
&:before {
|
|
8
8
|
position: absolute;
|
|
9
9
|
content: '';
|
|
@@ -12,9 +12,10 @@ const diagonalLine = css`
|
|
|
12
12
|
height: 1px;
|
|
13
13
|
width: calc(100% + 4px);
|
|
14
14
|
transform: rotate(45deg);
|
|
15
|
-
background-color: ${
|
|
15
|
+
background-color: ${getColor};
|
|
16
16
|
}
|
|
17
17
|
`;
|
|
18
|
+
const diagonalLine = makeDiagonalLine(({ theme }) => theme.colors.neutral[500]);
|
|
18
19
|
const focusBorder = css`
|
|
19
20
|
&:after {
|
|
20
21
|
position: absolute;
|
|
@@ -28,16 +29,16 @@ const focusBorder = css`
|
|
|
28
29
|
`;
|
|
29
30
|
const backgroundDateRange = {
|
|
30
31
|
inRange: css`
|
|
31
|
-
background-color: ${({ theme }) => theme.colors.brand[
|
|
32
|
-
box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[
|
|
32
|
+
background-color: ${({ theme }) => theme.colors.brand[100]};
|
|
33
|
+
box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[100]};
|
|
33
34
|
`,
|
|
34
35
|
startRange: css`
|
|
35
|
-
background-color: ${({ theme }) => theme.colors.brand[
|
|
36
|
+
background-color: ${({ theme }) => theme.colors.brand[100]};
|
|
36
37
|
border-radius: 50% 0 0 50%;
|
|
37
|
-
box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[
|
|
38
|
+
box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[100]};
|
|
38
39
|
`,
|
|
39
40
|
endRange: css`
|
|
40
|
-
background-color: ${({ theme }) => theme.colors.brand[
|
|
41
|
+
background-color: ${({ theme }) => theme.colors.brand[100]};
|
|
41
42
|
border-radius: 0 50% 50% 0;
|
|
42
43
|
`
|
|
43
44
|
};
|
|
@@ -305,7 +306,9 @@ const StyledWeekDaysListWrapper = styled(Grid, {
|
|
|
305
306
|
/* ─────────────────────────────────────────────────────────────────
|
|
306
307
|
READONLY REST STATES
|
|
307
308
|
───────────────────────────────────────────────────────────────── */
|
|
308
|
-
.dayWrapper.selectedDay.readOnly
|
|
309
|
+
.dayWrapper.selectedDay.readOnly,
|
|
310
|
+
.dayWrapper.startRangeDay.readOnly,
|
|
311
|
+
.dayWrapper.endRangeDay.readOnly {
|
|
309
312
|
${StyledDayBtn} {
|
|
310
313
|
background-color: ${({ theme }) => theme.colors.neutral["500"]};
|
|
311
314
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
@@ -345,13 +348,15 @@ const StyledWeekDaysListWrapper = styled(Grid, {
|
|
|
345
348
|
}
|
|
346
349
|
|
|
347
350
|
.dayWrapper.selectedDay.disabledDay.readOnly,
|
|
348
|
-
.dayWrapper.selectedDay.outOfRangeDay.readOnly
|
|
351
|
+
.dayWrapper.selectedDay.outOfRangeDay.readOnly,
|
|
352
|
+
.dayWrapper.startRangeDay.disabledDay.readOnly,
|
|
353
|
+
.dayWrapper.startRangeDay.outOfRangeDay.readOnly,
|
|
354
|
+
.dayWrapper.endRangeDay.disabledDay.readOnly,
|
|
355
|
+
.dayWrapper.endRangeDay.outOfRangeDay.readOnly {
|
|
349
356
|
${StyledDayBtn} {
|
|
350
357
|
background-color: ${({ theme }) => theme.colors.neutral["500"]};
|
|
351
358
|
color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
352
|
-
|
|
353
|
-
background-color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
354
|
-
}
|
|
359
|
+
${makeDiagonalLine(({ theme }) => theme.colors.neutral["000"])}
|
|
355
360
|
&:hover {
|
|
356
361
|
background-color: ${({ theme }) => theme.colors.neutral["700"]};
|
|
357
362
|
}
|
|
@@ -361,6 +366,29 @@ const StyledWeekDaysListWrapper = styled(Grid, {
|
|
|
361
366
|
}
|
|
362
367
|
}
|
|
363
368
|
|
|
369
|
+
.dayWrapper.inRangeDay.readOnly {
|
|
370
|
+
background-color: ${({ theme }) => theme.colors.neutral["100"]};
|
|
371
|
+
box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.neutral["100"]};
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.dayWrapper.inRangeDay.disabledDay.readOnly,
|
|
375
|
+
.dayWrapper.inRangeDay.outOfRangeDay.readOnly {
|
|
376
|
+
${StyledDayBtn} {
|
|
377
|
+
background-color: transparent;
|
|
378
|
+
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
379
|
+
${makeDiagonalLine(({ theme }) => theme.colors.neutral[700])}
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.dayWrapper.startRangeDay.inRangeImproperDay.readOnly {
|
|
384
|
+
background-color: ${({ theme }) => theme.colors.neutral["100"]};
|
|
385
|
+
box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.neutral["100"]};
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.dayWrapper.endRangeDay.inRangeImproperDay.readOnly {
|
|
389
|
+
background-color: ${({ theme }) => theme.colors.neutral["100"]};
|
|
390
|
+
}
|
|
391
|
+
|
|
364
392
|
/* ─────────────────────────────────────────────────────────────────
|
|
365
393
|
NOT CURRENT MONTH
|
|
366
394
|
───────────────────────────────────────────────────────────────── */
|
|
@@ -407,16 +435,14 @@ const StyledWeekDaysListWrapper = styled(Grid, {
|
|
|
407
435
|
&.disabledDay,
|
|
408
436
|
&.outOfRangeDay {
|
|
409
437
|
${StyledDayBtn} {
|
|
410
|
-
color:
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
background-color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
414
|
-
}
|
|
438
|
+
background-color: transparent;
|
|
439
|
+
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
440
|
+
${makeDiagonalLine(({ theme }) => theme.colors.neutral[700])}
|
|
415
441
|
}
|
|
416
442
|
&.focusedDay {
|
|
417
443
|
${StyledDayBtn} {
|
|
418
444
|
&:after {
|
|
419
|
-
border-color: ${({ theme }) => theme.colors.
|
|
445
|
+
border-color: ${({ theme }) => theme.colors.brand[700]};
|
|
420
446
|
}
|
|
421
447
|
}
|
|
422
448
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/Styleds.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\n// Diagonal line for disabled / out-of-range days \u2014 neutral-500, position only.\nconst diagonalLine = 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: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\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[200]};\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n `,\n startRange: css`\n background-color: ${({ theme }) => theme.colors.brand[200]};\n border-radius: 50% 0 0 50%;\n box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n `,\n endRange: css`\n background-color: ${({ theme }) => theme.colors.brand[200]};\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 ${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 ${StyledDayBtn} {\n background-color: ${({ theme }) => theme.colors.neutral['500']};\n color: ${({ theme }) => theme.colors.neutral['000']};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\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 /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 color: ${({ theme }) => theme.colors.neutral['000']};\n background-color: ${({ theme }) => theme.colors.danger[900]};\n &:before {\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n }\n }\n &.focusedDay {\n ${StyledDayBtn} {\n &:after {\n border-color: ${({ theme }) => theme.colors.neutral['000']};\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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,KAAK,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -80,10 +80,13 @@ const HoursList = () => {
|
|
|
80
80
|
const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || hours === hourString;
|
|
81
81
|
const isNotAValidSelection = getIsDisabledTime(currHourTimeString);
|
|
82
82
|
const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;
|
|
83
|
+
const isSelected = hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum;
|
|
83
84
|
const btnProps = {
|
|
84
85
|
role: "spinbutton",
|
|
85
|
-
|
|
86
|
-
|
|
86
|
+
...isSelected && {
|
|
87
|
+
"aria-valuenow": convertToPositiveNumberIfPossible(hourString),
|
|
88
|
+
"aria-valuetext": `${hourString} hours`
|
|
89
|
+
},
|
|
87
90
|
"aria-valuemin": 1,
|
|
88
91
|
"aria-valuemax": 12,
|
|
89
92
|
"aria-label": `${hourString} hours`,
|
|
@@ -93,7 +96,6 @@ const HoursList = () => {
|
|
|
93
96
|
onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrHourOnKeyDown : void 0,
|
|
94
97
|
innerRef: isTheItemVisuallyInTheCenter ? handleCurrYearRef : void 0
|
|
95
98
|
};
|
|
96
|
-
const isSelected = hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum;
|
|
97
99
|
return /* @__PURE__ */ jsx(StyledWheelListItem, { children: /* @__PURE__ */ jsx(
|
|
98
100
|
StyledTimeBtn,
|
|
99
101
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/HoursList.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\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 { 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 btnProps = {\n role: 'spinbutton',\n 'aria-valuenow': convertToPositiveNumberIfPossible(hourString),\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+DnB,SAiBM,KAjBN;AA9DJ,SAAS,kBAAkB,sBAAqC;AAChE,SAAgB,aAAa,YAAY,gBAAgB;AACzD,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,yCAAyC;AAClD,SAAS,eAAe,0BAA0B,iBAAiB,2BAA2B;AAC9F,SAAS,wBAAwB;AAE1B,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;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,IAAI,WAAW,+BAA+B;AAE9C,QAAM,oBAAoB;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,IAAI,SAAS,KAAK;AAE1D,QAAM,mBAAmB,YAAY,MAAM;AACzC,sBAAkB,IAAI;AACtB,gCAA4B;AAAA,EAC9B,GAAG,CAAC,mBAAmB,2BAA2B,CAAC;AAEnD,QAAM,kBAAkB;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,qBAAC,mBAAgB,SAAS,kBAAkB,QAAQ,iBAClD;AAAA,wBAAC,uBACC;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,mCAAmC,UAAU;AAAA,QAG1D,iBAAe,YAAY;AAAA,QAC3B,mBAAmB,qBAAqB;AAAA,QACxC,eAAe;AAAA,QACf,UAAU;AAAA,QACV,MAAK;AAAA,QAEL,8BAAC,kBAAe,OAAO,YAAY;AAAA;AAAA,IACrC,GACF;AAAA,IACC,aAAa,IAAI,CAAC,eAAe;AAChC,YAAM,MAAM,kBAAkB,cAAc,EAAE;AAC9C,UAAI,CAAC,WAAY,QAAO,oBAAC,yBAAyB,GAAK;AACvD,YAAM,qBAAqB,GAAG,UAAU,IAAI,aAAa,IAAI,YAAY;AAEzE,YAAM,kCAAkC,CAAC,SAAS,kCAAkC,UAAU,MAAM;AACpG,YAAM,+BAA+B,mCAAmC,UAAU;AAClF,YAAM,uBAAuB,kBAAkB,kBAAkB;AACjE,YAAM,WAAW,+BAA+B,IAAI;AACpD,YAAM,WAAW;AAAA,QACf,MAAM;AAAA,QACN,iBAAiB,kCAAkC,UAAU;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\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 { 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || readOnly}\n getOwnerProps={getProps}\n type=\"button\"\n >\n <ChevronSmallDown color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n </StyledWheelList>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -79,12 +79,15 @@ const MinutesList = () => {
|
|
|
79
79
|
const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || minutes === minutesString;
|
|
80
80
|
const isNotAValidSelection = getIsDisabledTime(currMinutesTimeString);
|
|
81
81
|
const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;
|
|
82
|
+
const isSelected = minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
|
|
82
83
|
const btnProps = {
|
|
83
84
|
role: "spinbutton",
|
|
84
|
-
|
|
85
|
-
|
|
85
|
+
...isSelected && {
|
|
86
|
+
"aria-valuenow": convertToPositiveNumberIfPossible(minutesString),
|
|
87
|
+
"aria-valuetext": `${minutesString} minutes`
|
|
88
|
+
},
|
|
86
89
|
"aria-label": `${minutesString} minutes`,
|
|
87
|
-
"aria-valuemin":
|
|
90
|
+
"aria-valuemin": 0,
|
|
88
91
|
"aria-valuemax": 59,
|
|
89
92
|
"aria-disabled": readOnly || applyAriaDisabled,
|
|
90
93
|
"aria-invalid": isNotAValidSelection,
|
|
@@ -97,7 +100,7 @@ const MinutesList = () => {
|
|
|
97
100
|
{
|
|
98
101
|
$isTheItemVisuallyInTheCenter: isTheItemVisuallyInTheCenter,
|
|
99
102
|
$isNotAValidSelection: isNotAValidSelection,
|
|
100
|
-
$selected:
|
|
103
|
+
$selected: isSelected,
|
|
101
104
|
$isUnset: !minutes,
|
|
102
105
|
$readOnly: readOnly || applyAriaDisabled,
|
|
103
106
|
$isFocusedWheel: isFocusedWheel,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/MinutesList.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\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 { 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 btnProps = {\n role: 'spinbutton',\n 'aria-valuenow': convertToPositiveNumberIfPossible(minutesString),\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC8DnB,SAiBM,KAjBN;AA7DJ,SAAS,kBAAkB,sBAAqC;AAChE,SAAgB,aAAa,YAAY,gBAAgB;AACzD,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,yCAAyC;AAClD,SAAS,eAAe,0BAA0B,iBAAiB,2BAA2B;AAC9F,SAAS,wBAAwB;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;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,IAAI,WAAW,+BAA+B;AAE9C,QAAM,wBAAwB;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,IAAI,SAAS,KAAK;AAE1D,QAAM,mBAAmB,YAAY,MAAM;AACzC,sBAAkB,IAAI;AACtB,kCAA8B;AAAA,EAChC,GAAG,CAAC,mBAAmB,6BAA6B,CAAC;AAErD,QAAM,kBAAkB;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,qBAAC,mBAAgB,SAAS,kBAAkB,QAAQ,iBAClD;AAAA,wBAAC,uBACC;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAa,mCAAmC,UAAU;AAAA,QAG1D,iBAAe,YAAY;AAAA,QAC3B,mBAAmB,qBAAqB;AAAA,QACxC,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,kBAAe,OAAO,YAAY;AAAA;AAAA,IACrC,GACF;AAAA,IACC,eAAe,IAAI,CAAC,kBAAkB;AACrC,YAAM,MAAM,qBAAqB,iBAAiB,EAAE;AACpD,UAAI,CAAC,cAAe,QAAO,oBAAC,yBAAyB,GAAK;AAC1D,YAAM,wBAAwB,GAAG,WAAW,IAAI,aAAa,IAAI,YAAY;AAC7E,YAAM,kCACJ,CAAC,WAAW,kCAAkC,aAAa,MAAM;AACnE,YAAM,+BAA+B,mCAAmC,YAAY;AACpF,YAAM,uBAAuB,kBAAkB,qBAAqB;AAEpE,YAAM,WAAW,+BAA+B,IAAI;AACpD,YAAM,WAAW;AAAA,QACf,MAAM;AAAA,QACN,iBAAiB,kCAAkC,aAAa;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\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 { 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,19 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const
|
|
3
|
-
export declare const
|
|
1
|
+
import { type Theme } from '@elliemae/ds-system';
|
|
2
|
+
export declare const StyledIconTriggerButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
|
|
3
|
+
export declare const StyledShadowWrapper: import("styled-components").StyledComponent<"div", Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
4
|
+
export declare const StyledCalendarWrapper: import("styled-components").StyledComponent<"div", Theme, {
|
|
4
5
|
$readOnlyStyles?: boolean;
|
|
5
6
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
6
|
-
export declare const StyledHeader: import("styled-components").StyledComponent<"section",
|
|
7
|
-
export declare const StyledHeaderLabel: import("styled-components").StyledComponent<"h3",
|
|
8
|
-
export declare const StyledHeaderButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>,
|
|
9
|
-
export declare const StyledBody: import("styled-components").StyledComponent<"section",
|
|
10
|
-
export declare const StyledDayBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>,
|
|
7
|
+
export declare const StyledHeader: import("styled-components").StyledComponent<"section", Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"section">, never>;
|
|
8
|
+
export declare const StyledHeaderLabel: import("styled-components").StyledComponent<"h3", Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"h3">, never>;
|
|
9
|
+
export declare const StyledHeaderButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
|
|
10
|
+
export declare const StyledBody: import("styled-components").StyledComponent<"section", Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"section">, never>;
|
|
11
|
+
export declare const StyledDayBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, Theme, {
|
|
11
12
|
$readOnlyStyles?: boolean;
|
|
12
13
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
|
|
13
|
-
export declare const StyledWeekDaysListWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>,
|
|
14
|
+
export declare const StyledWeekDaysListWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, Theme, {
|
|
14
15
|
isHeader?: boolean;
|
|
15
16
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
16
|
-
export declare const StyledWeekDaysHeaderItem: import("styled-components").StyledComponent<"div",
|
|
17
|
-
export declare const CalendarFooterMessage: import("styled-components").StyledComponent<"div",
|
|
17
|
+
export declare const StyledWeekDaysHeaderItem: import("styled-components").StyledComponent<"div", Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
18
|
+
export declare const CalendarFooterMessage: import("styled-components").StyledComponent<"div", Theme, {
|
|
18
19
|
$readOnlyStyles?: boolean;
|
|
19
20
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-date-time-picker",
|
|
3
|
-
"version": "3.60.0-next.
|
|
3
|
+
"version": "3.60.0-next.62",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Date Time Picker",
|
|
6
6
|
"files": [
|
|
@@ -37,13 +37,13 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"uid": "^2.0.2",
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-button-v2": "3.60.0-next.62",
|
|
41
|
+
"@elliemae/ds-grid": "3.60.0-next.62",
|
|
42
|
+
"@elliemae/ds-icons": "3.60.0-next.62",
|
|
43
|
+
"@elliemae/ds-popperjs": "3.60.0-next.62",
|
|
44
|
+
"@elliemae/ds-props-helpers": "3.60.0-next.62",
|
|
45
|
+
"@elliemae/ds-typescript-helpers": "3.60.0-next.62",
|
|
46
|
+
"@elliemae/ds-system": "3.60.0-next.62"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@elliemae/pui-theme": "~2.13.0",
|
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
"jest": "^30.0.0",
|
|
52
52
|
"styled-components": "~5.3.9",
|
|
53
53
|
"styled-system": "^5.1.5",
|
|
54
|
-
"@elliemae/ds-
|
|
55
|
-
"@elliemae/ds-
|
|
54
|
+
"@elliemae/ds-test-utils": "3.60.0-next.62",
|
|
55
|
+
"@elliemae/ds-monorepo-devops": "3.60.0-next.62"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@elliemae/pui-theme": "~2.13.0",
|