@elliemae/ds-form-date-time-picker 3.80.0-next.2 → 3.80.0-next.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/constants/index.js +15 -1
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/parts/DateInputs/DateInputs.js +5 -5
- package/dist/cjs/parts/DateInputs/DateInputs.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/CalendarBody.js +18 -14
- package/dist/cjs/parts/Pickers/Calendar/CalendarBody.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/CalendarContent.js +1 -1
- package/dist/cjs/parts/Pickers/Calendar/CalendarContent.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/CalendarHead.js +1 -1
- package/dist/cjs/parts/Pickers/Calendar/CalendarHead.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/CalendarWeekDays.js +27 -22
- package/dist/cjs/parts/Pickers/Calendar/CalendarWeekDays.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/Styleds.js +16 -4
- package/dist/cjs/parts/Pickers/Calendar/Styleds.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/usePopperTriggerLogic.js +12 -3
- package/dist/cjs/parts/Pickers/Calendar/usePopperTriggerLogic.js.map +2 -2
- package/dist/cjs/parts/Pickers/PickersIcons.js +2 -1
- package/dist/cjs/parts/Pickers/PickersIcons.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js +5 -5
- package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js +8 -8
- package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js +5 -5
- package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js +16 -4
- package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelContent.js +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelContent.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/usePopperTriggerLogic.js +4 -3
- package/dist/cjs/parts/Pickers/TimeWheel/usePopperTriggerLogic.js.map +2 -2
- package/dist/cjs/parts/Styleds.js +16 -36
- package/dist/cjs/parts/Styleds.js.map +2 -2
- package/dist/cjs/parts/TimeInputs/TimeInputs.js +5 -5
- package/dist/cjs/parts/TimeInputs/TimeInputs.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/slot-arguments-polymorphic-typescript.js.map +1 -1
- package/dist/cjs/typescript-testing/slot-props.js +73 -0
- package/dist/cjs/typescript-testing/slot-props.js.map +2 -2
- package/dist/esm/constants/index.js +15 -1
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/parts/DateInputs/DateInputs.js +5 -5
- package/dist/esm/parts/DateInputs/DateInputs.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarBody.js +18 -14
- package/dist/esm/parts/Pickers/Calendar/CalendarBody.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarContent.js +1 -1
- package/dist/esm/parts/Pickers/Calendar/CalendarContent.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarHead.js +1 -1
- package/dist/esm/parts/Pickers/Calendar/CalendarHead.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarWeekDays.js +27 -22
- package/dist/esm/parts/Pickers/Calendar/CalendarWeekDays.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/Styleds.js +21 -5
- package/dist/esm/parts/Pickers/Calendar/Styleds.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/usePopperTriggerLogic.js +12 -3
- package/dist/esm/parts/Pickers/Calendar/usePopperTriggerLogic.js.map +2 -2
- package/dist/esm/parts/Pickers/PickersIcons.js +2 -1
- package/dist/esm/parts/Pickers/PickersIcons.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/HoursList.js +5 -5
- package/dist/esm/parts/Pickers/TimeWheel/HoursList.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js +8 -8
- package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js +5 -5
- package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/Styleds.js +21 -5
- package/dist/esm/parts/Pickers/TimeWheel/Styleds.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelContent.js +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelContent.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/usePopperTriggerLogic.js +4 -3
- package/dist/esm/parts/Pickers/TimeWheel/usePopperTriggerLogic.js.map +2 -2
- package/dist/esm/parts/Styleds.js +21 -37
- package/dist/esm/parts/Styleds.js.map +2 -2
- package/dist/esm/parts/TimeInputs/TimeInputs.js +5 -5
- package/dist/esm/parts/TimeInputs/TimeInputs.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +2 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/slot-props.js +73 -0
- package/dist/esm/typescript-testing/slot-props.js.map +2 -2
- package/dist/types/constants/index.d.ts +48 -0
- package/dist/types/parts/Styleds.d.ts +0 -3
- package/dist/types/slot-arguments-polymorphic-typescript.d.ts +18 -2
- package/package.json +12 -12
|
@@ -156,7 +156,10 @@ const StyledIconTriggerButton = (0, import_ds_system.styled)(import_ds_button_v2
|
|
|
156
156
|
width: 2rem;
|
|
157
157
|
height: 2rem;
|
|
158
158
|
`;
|
|
159
|
-
const StyledWheelList = import_ds_system.styled
|
|
159
|
+
const StyledWheelList = (0, import_ds_system.styled)("div", {
|
|
160
|
+
name: import_constants.DSControlledDateTimePickerName,
|
|
161
|
+
slot: import_constants.FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEEL_LIST
|
|
162
|
+
})`
|
|
160
163
|
width: 100%;
|
|
161
164
|
height: 100%;
|
|
162
165
|
margin: auto;
|
|
@@ -202,7 +205,10 @@ const StyledTimePickerHead = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
202
205
|
align-items: center;
|
|
203
206
|
background: ${({ theme }) => theme.colors.neutral["050"]};
|
|
204
207
|
`;
|
|
205
|
-
const StyledTimePickerWheelsLegend = import_ds_system.styled
|
|
208
|
+
const StyledTimePickerWheelsLegend = (0, import_ds_system.styled)("div", {
|
|
209
|
+
name: import_constants.DSControlledDateTimePickerName,
|
|
210
|
+
slot: import_constants.FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEELS_LEGEND
|
|
211
|
+
})`
|
|
206
212
|
width: 100%;
|
|
207
213
|
height: 100%;
|
|
208
214
|
grid-area: TimePickerWheelsLegend;
|
|
@@ -213,7 +219,10 @@ const StyledTimePickerWheelsLegend = import_ds_system.styled.div`
|
|
|
213
219
|
text-align: center;
|
|
214
220
|
background: ${({ theme }) => theme.colors.neutral["050"]};
|
|
215
221
|
`;
|
|
216
|
-
const StyledTimePickerWheelWrapper = import_ds_system.styled
|
|
222
|
+
const StyledTimePickerWheelWrapper = (0, import_ds_system.styled)("div", {
|
|
223
|
+
name: import_constants.DSControlledDateTimePickerName,
|
|
224
|
+
slot: import_constants.FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEEL_WRAPPER
|
|
225
|
+
})`
|
|
217
226
|
background-color: ${({ theme, $readOnlyStyles }) => $readOnlyStyles ? theme.colors.neutral["050"] : theme.colors.neutral["000"]};
|
|
218
227
|
width: 100%;
|
|
219
228
|
grid-area: VerticalWheelWrapper;
|
|
@@ -258,7 +267,10 @@ const StyledTimeBtn = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
258
267
|
${focusBorder}
|
|
259
268
|
${fontWeight}
|
|
260
269
|
`;
|
|
261
|
-
const StyledWheelListItem = import_ds_system.styled
|
|
270
|
+
const StyledWheelListItem = (0, import_ds_system.styled)("div", {
|
|
271
|
+
name: import_constants.DSControlledDateTimePickerName,
|
|
272
|
+
slot: import_constants.FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEEL_LIST_ITEM
|
|
273
|
+
})`
|
|
262
274
|
margin: auto;
|
|
263
275
|
width: 36px;
|
|
264
276
|
height: 36px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/TimeWheel/Styleds.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable prefer-destructuring */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled, type Theme } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\ninterface StyledWheelListItemPropsT {\n $isTheItemVisuallyInTheCenter?: boolean;\n $selected?: boolean;\n $isNotAValidSelection?: boolean;\n $readOnly?: boolean;\n $isUnset?: boolean;\n $isFocusedWheel?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n showShadow?: boolean;\n isControllerOnly: boolean;\n}\n\n// Focus ring \u2014 always brand-700 regardless of validity or readOnly state.\n// Only rendered for the visually centred item when the wheel is focused and the item is not selected.\nconst focusBorder = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $isTheItemVisuallyInTheCenter, $selected, $isFocusedWheel } = props;\n if ($isTheItemVisuallyInTheCenter && !$selected && $isFocusedWheel)\n return css<StyledWheelListItemPropsT>`\n &:after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n border-radius: 50%;\n border: 2px solid ${theme.colors.brand[700]};\n }\n `;\n return css``;\n};\n\n// Diagonal line for invalid items. Colour is neutral at rest in all states \u2014\n// the focus ring (::after) is the sole blue/brand focus signal.\nconst diagonalLine = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $isNotAValidSelection, $readOnly } = props;\n if (!$isNotAValidSelection) return css``;\n\n let beforeBgColor = theme.colors.neutral[500]; // idle not-selected\n if ($readOnly && !$selected) beforeBgColor = theme.colors.neutral[700]; // readOnly not-selected\n if ($selected) beforeBgColor = theme.colors.neutral['000']; // selected always white\n\n return css<StyledWheelListItemPropsT>`\n cursor: not-allowed;\n &:before {\n position: absolute;\n content: '';\n top: 48%;\n left: -1px;\n height: 1px;\n width: calc(100% + 2px);\n transform: rotate(45deg);\n background-color: ${beforeBgColor};\n }\n `;\n};\n\n// Text colour. On focus the invalid case resolves to brand-700 (not danger-900) for\n// consistency with the universal blue focus ring decision.\nconst fontColor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $readOnly, $isNotAValidSelection, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n let color = theme.colors.neutral[700]; // default\n if ($selected) color = theme.colors.neutral['000']; // selected always white\n\n // For items that can't receive :focus (meridiem visual layer), drive focused-center colour via props.\n // Hours/minutes also benefit from this \u2014 :focus below applies the same value.\n if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && !$selected && !$readOnly) {\n color = theme.colors.brand[700]; // always brand, matches the blue focus ring\n }\n\n // Hover: valid not-selected not-readOnly \u2192 brand-700; all other cases \u2192 no change\n const hoverColor = !$selected && !$readOnly && !$isNotAValidSelection ? theme.colors.brand[700] : '';\n\n // Focus (:focus fires on hours/minutes; meridiem relies on the prop-driven path above)\n // Matches focus ring: always brand when interactive, no change when readOnly or selected\n const focusColor = !$selected && !$readOnly ? theme.colors.brand[700] : '';\n\n return css<StyledWheelListItemPropsT>`\n color: ${color};\n &:hover {\n color: ${hoverColor};\n }\n &:focus {\n color: ${focusColor};\n }\n `;\n};\n\n// Background colours at rest and on hover.\n// Hover matrix (readOnly always wins):\n// readOnly \u2192 selected: neutral-700 | not-selected: neutral-100\n// invalid \u2192 selected: danger-950 | not-selected: danger-200 hardcoded to #fffcfc due to contrast failure of danger-200 token\n// valid \u2192 selected: brand-800 | not-selected: brand-100\nconst btnBgColorPerStatus = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $isNotAValidSelection, $readOnly, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n // Rest background: only selected items have a non-transparent background.\n let bgColor = '';\n if ($selected) {\n bgColor = theme.colors.brand[600];\n if ($isNotAValidSelection) bgColor = theme.colors.danger[900]; // invalid selected: red\n if ($readOnly) bgColor = theme.colors.neutral[500]; // readOnly always wins: grey\n }\n\n // When the wheel column is active (focused), drive the selected centre item to the\n // same colour as its hover state \u2014 :hover won't fire on keyboard navigation and\n // meridiem visual items can't receive :focus at all.\n if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && $selected) {\n if ($readOnly) bgColor = theme.colors.neutral[700];\n else if ($isNotAValidSelection) bgColor = theme.colors.danger[950];\n else bgColor = theme.colors.brand[800];\n }\n\n // Hover background \u2014 new spec, clean if/else, no empty-string leaks.\n let hoverBgColor: string;\n if ($readOnly) {\n hoverBgColor = $selected ? theme.colors.neutral[700] : theme.colors.neutral[100];\n } else if ($isNotAValidSelection) {\n // TODO: danger[200] and danger[400] are currently the same token and both fail contrast\n // against common dimsum color combinations. Hardcoded until the theme token is fixed.\n hoverBgColor = $selected ? theme.colors.danger[950] : '#fffcfc'; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n } else {\n hoverBgColor = $selected ? theme.colors.brand[800] : theme.colors.brand[100];\n }\n\n return css`\n background-color: ${bgColor};\n &:hover {\n background-color: ${hoverBgColor};\n }\n `;\n};\n\nconst cursor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const cursorStyle = props.$readOnly || props.$isNotAValidSelection ? 'not-allowed' : 'pointer';\n return css`\n cursor: ${cursorStyle};\n `;\n};\n\n// Font weight: selected \u2192 semibold at rest (no hover override needed, it is already semibold).\n// Not selected \u2192 semibold on hover only.\nconst fontWeight = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected } = props;\n if ($selected) {\n return css`\n font-weight: ${theme.fontWeights.semibold};\n `;\n }\n return css`\n &:hover {\n font-weight: ${theme.fontWeights.semibold};\n }\n `;\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n color: ${({ theme }) => theme.colors.brand['800']};\n width: 2rem;\n height: 2rem;\n`;\n\nexport const StyledWheelList = styled.div`\n width: 100%;\n height: 100%;\n margin: auto;\n padding: 0;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n &:focus-within {\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nexport const StyledTimePickerContainer = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.TIMEWHEEL,\n})<StyledTimePickerContainerT>`\n display: grid;\n position: relative;\n grid-template-columns: 192px;\n grid-template-rows: 36px 30px auto;\n grid-template-areas:\n 'TimePickerHead'\n 'TimePickerWheelsLegend'\n 'VerticalWheelWrapper';\n`;\n\nexport const StyledTimePickerHead = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.HEADER_LABEL,\n})`\n width: 100%;\n grid-area: TimePickerHead;\n justify-content: center;\n align-items: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled.div`\n width: 100%;\n height: 100%;\n grid-area: TimePickerWheelsLegend;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n align-items: center;\n justify-content: center;\n text-align: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled.div<{ $readOnlyStyles?: boolean }>`\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n width: 100%;\n grid-area: VerticalWheelWrapper;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n grid-template-rows: 100%;\n & ul:not(:last-child) {\n position: relative;\n &:after {\n content: '';\n position: absolute;\n left: 100%;\n top: 5%;\n height: 90%;\n width: 1px;\n background: ${({ theme }) => theme.colors.neutral['300']};\n }\n }\n\n > *:not(:last-child) {\n border-right: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n }\n`;\n\nexport const StyledTimeBtn = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})<StyledWheelListItemPropsT>`\n position: relative;\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n &:focus {\n outline: none;\n }\n ${cursor}\n ${fontColor}\n ${diagonalLine}\n ${btnBgColorPerStatus}\n ${focusBorder}\n ${fontWeight}\n`;\n\nexport const StyledWheelListItem = styled.div`\n margin: auto;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n min-width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})<{ $readOnlyStyles?: boolean }>`\n border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n padding: ${({ theme }) => theme.space.xxs2};\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAA2B;AAC3B,qBAAqB;AACrB,uBAAwC;AACxC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable prefer-destructuring */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled, type Theme } from '@elliemae/ds-system';\nimport {\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n FORM_DATE_TIME_PICKER_SLOTS,\n} from '../../../constants/index.js';\n\ninterface StyledWheelListItemPropsT {\n $isTheItemVisuallyInTheCenter?: boolean;\n $selected?: boolean;\n $isNotAValidSelection?: boolean;\n $readOnly?: boolean;\n $isUnset?: boolean;\n $isFocusedWheel?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n showShadow?: boolean;\n isControllerOnly: boolean;\n}\n\n// Focus ring \u2014 always brand-700 regardless of validity or readOnly state.\n// Only rendered for the visually centred item when the wheel is focused and the item is not selected.\nconst focusBorder = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $isTheItemVisuallyInTheCenter, $selected, $isFocusedWheel } = props;\n if ($isTheItemVisuallyInTheCenter && !$selected && $isFocusedWheel)\n return css<StyledWheelListItemPropsT>`\n &:after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n border-radius: 50%;\n border: 2px solid ${theme.colors.brand[700]};\n }\n `;\n return css``;\n};\n\n// Diagonal line for invalid items. Colour is neutral at rest in all states \u2014\n// the focus ring (::after) is the sole blue/brand focus signal.\nconst diagonalLine = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $isNotAValidSelection, $readOnly } = props;\n if (!$isNotAValidSelection) return css``;\n\n let beforeBgColor = theme.colors.neutral[500]; // idle not-selected\n if ($readOnly && !$selected) beforeBgColor = theme.colors.neutral[700]; // readOnly not-selected\n if ($selected) beforeBgColor = theme.colors.neutral['000']; // selected always white\n\n return css<StyledWheelListItemPropsT>`\n cursor: not-allowed;\n &:before {\n position: absolute;\n content: '';\n top: 48%;\n left: -1px;\n height: 1px;\n width: calc(100% + 2px);\n transform: rotate(45deg);\n background-color: ${beforeBgColor};\n }\n `;\n};\n\n// Text colour. On focus the invalid case resolves to brand-700 (not danger-900) for\n// consistency with the universal blue focus ring decision.\nconst fontColor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $readOnly, $isNotAValidSelection, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n let color = theme.colors.neutral[700]; // default\n if ($selected) color = theme.colors.neutral['000']; // selected always white\n\n // For items that can't receive :focus (meridiem visual layer), drive focused-center colour via props.\n // Hours/minutes also benefit from this \u2014 :focus below applies the same value.\n if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && !$selected && !$readOnly) {\n color = theme.colors.brand[700]; // always brand, matches the blue focus ring\n }\n\n // Hover: valid not-selected not-readOnly \u2192 brand-700; all other cases \u2192 no change\n const hoverColor = !$selected && !$readOnly && !$isNotAValidSelection ? theme.colors.brand[700] : '';\n\n // Focus (:focus fires on hours/minutes; meridiem relies on the prop-driven path above)\n // Matches focus ring: always brand when interactive, no change when readOnly or selected\n const focusColor = !$selected && !$readOnly ? theme.colors.brand[700] : '';\n\n return css<StyledWheelListItemPropsT>`\n color: ${color};\n &:hover {\n color: ${hoverColor};\n }\n &:focus {\n color: ${focusColor};\n }\n `;\n};\n\n// Background colours at rest and on hover.\n// Hover matrix (readOnly always wins):\n// readOnly \u2192 selected: neutral-700 | not-selected: neutral-100\n// invalid \u2192 selected: danger-950 | not-selected: danger-200 hardcoded to #fffcfc due to contrast failure of danger-200 token\n// valid \u2192 selected: brand-800 | not-selected: brand-100\nconst btnBgColorPerStatus = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected, $isNotAValidSelection, $readOnly, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n // Rest background: only selected items have a non-transparent background.\n let bgColor = '';\n if ($selected) {\n bgColor = theme.colors.brand[600];\n if ($isNotAValidSelection) bgColor = theme.colors.danger[900]; // invalid selected: red\n if ($readOnly) bgColor = theme.colors.neutral[500]; // readOnly always wins: grey\n }\n\n // When the wheel column is active (focused), drive the selected centre item to the\n // same colour as its hover state \u2014 :hover won't fire on keyboard navigation and\n // meridiem visual items can't receive :focus at all.\n if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && $selected) {\n if ($readOnly) bgColor = theme.colors.neutral[700];\n else if ($isNotAValidSelection) bgColor = theme.colors.danger[950];\n else bgColor = theme.colors.brand[800];\n }\n\n // Hover background \u2014 new spec, clean if/else, no empty-string leaks.\n let hoverBgColor: string;\n if ($readOnly) {\n hoverBgColor = $selected ? theme.colors.neutral[700] : theme.colors.neutral[100];\n } else if ($isNotAValidSelection) {\n // TODO: danger[200] and danger[400] are currently the same token and both fail contrast\n // against common dimsum color combinations. Hardcoded until the theme token is fixed.\n hoverBgColor = $selected ? theme.colors.danger[950] : '#fffcfc'; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n } else {\n hoverBgColor = $selected ? theme.colors.brand[800] : theme.colors.brand[100];\n }\n\n return css`\n background-color: ${bgColor};\n &:hover {\n background-color: ${hoverBgColor};\n }\n `;\n};\n\nconst cursor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const cursorStyle = props.$readOnly || props.$isNotAValidSelection ? 'not-allowed' : 'pointer';\n return css`\n cursor: ${cursorStyle};\n `;\n};\n\n// Font weight: selected \u2192 semibold at rest (no hover override needed, it is already semibold).\n// Not selected \u2192 semibold on hover only.\nconst fontWeight = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n const { theme, $selected } = props;\n if ($selected) {\n return css`\n font-weight: ${theme.fontWeights.semibold};\n `;\n }\n return css`\n &:hover {\n font-weight: ${theme.fontWeights.semibold};\n }\n `;\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n color: ${({ theme }) => theme.colors.brand['800']};\n width: 2rem;\n height: 2rem;\n`;\n\n// DEV-001: this element's :focus-within is the WCAG 2.4.11 focus indicator for the meridiem\n// column. Adding name/slot only adds attributes \u2014 it must not change the CSS below.\nexport const StyledWheelList = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEEL_LIST,\n})`\n width: 100%;\n height: 100%;\n margin: auto;\n padding: 0;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n &:focus-within {\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n }\n }\n`;\n\nexport const StyledTimePickerContainer = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.TIMEWHEEL,\n})<StyledTimePickerContainerT>`\n display: grid;\n position: relative;\n grid-template-columns: 192px;\n grid-template-rows: 36px 30px auto;\n grid-template-areas:\n 'TimePickerHead'\n 'TimePickerWheelsLegend'\n 'VerticalWheelWrapper';\n`;\n\nexport const StyledTimePickerHead = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.HEADER_LABEL,\n})`\n width: 100%;\n grid-area: TimePickerHead;\n justify-content: center;\n align-items: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEELS_LEGEND,\n})`\n width: 100%;\n height: 100%;\n grid-area: TimePickerWheelsLegend;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n align-items: center;\n justify-content: center;\n text-align: center;\n background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEEL_WRAPPER,\n})<{ $readOnlyStyles?: boolean }>`\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n width: 100%;\n grid-area: VerticalWheelWrapper;\n display: grid;\n grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n theme.space.xl};\n grid-template-rows: 100%;\n & ul:not(:last-child) {\n position: relative;\n &:after {\n content: '';\n position: absolute;\n left: 100%;\n top: 5%;\n height: 90%;\n width: 1px;\n background: ${({ theme }) => theme.colors.neutral['300']};\n }\n }\n\n > *:not(:last-child) {\n border-right: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n }\n`;\n\nexport const StyledTimeBtn = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})<StyledWheelListItemPropsT>`\n position: relative;\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n &:focus {\n outline: none;\n }\n ${cursor}\n ${fontColor}\n ${diagonalLine}\n ${btnBgColorPerStatus}\n ${focusBorder}\n ${fontWeight}\n`;\n\nexport const StyledWheelListItem = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEEL_LIST_ITEM,\n})`\n margin: auto;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n min-width: ${({ theme }) => theme.space.s};\n border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('div', {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})<{ $readOnlyStyles?: boolean }>`\n border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n padding: ${({ theme }) => theme.space.xxs2};\n color: ${({ theme }) => theme.colors.danger[900]};\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n text-align: right;\n background-color: ${({ theme, $readOnlyStyles }) =>\n $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -67,12 +67,12 @@ const TimeWheelContent = import_react.default.memo(() => {
|
|
|
67
67
|
children: `${hours || "__"}:${minutes || "__"} ${meridiem || "__"}`
|
|
68
68
|
}
|
|
69
69
|
),
|
|
70
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledTimePickerWheelsLegend, { children: [
|
|
70
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledTimePickerWheelsLegend, { getOwnerProps: getProps, children: [
|
|
71
71
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "H" }),
|
|
72
72
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "M" }),
|
|
73
73
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "A" })
|
|
74
74
|
] }),
|
|
75
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledTimePickerWheelWrapper, { $readOnlyStyles: readOnly || applyAriaDisabled, children: [
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledTimePickerWheelWrapper, { $readOnlyStyles: readOnly || applyAriaDisabled, getOwnerProps: getProps, children: [
|
|
76
76
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HoursList.HoursList, {}),
|
|
77
77
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MinutesList.MinutesList, {}),
|
|
78
78
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeridiemList.MeridiemList, {})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelContent.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { HoursList } from './HoursList.js';\nimport { MeridiemList } from './MeridiemList.js';\nimport { MinutesList } from './MinutesList.js';\nimport {\n StyledTimePickerContainer,\n StyledTimePickerHead,\n StyledTimePickerWheelsLegend,\n StyledTimePickerWheelWrapper,\n} from './Styleds.js';\nimport { TimeWheelFooter } from './TimeWheelFooter.js';\n\nexport const TimeWheelContent = React.memo(() => {\n const {\n isControllerOnly,\n hours,\n minutes,\n meridiem,\n getProps,\n props: { readOnly, applyAriaDisabled },\n } = useContext(ControlledDateTimePickerContext);\n\n return (\n <StyledTimePickerContainer\n isControllerOnly={isControllerOnly}\n data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL}\n getOwnerProps={getProps}\n role=\"region\"\n aria-label=\"timewheel\"\n >\n <StyledTimePickerHead\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL}\n getOwnerProps={getProps}\n >{`${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`}</StyledTimePickerHead>\n <StyledTimePickerWheelsLegend>\n <div>H</div>\n <div>M</div>\n <div>A</div>\n </StyledTimePickerWheelsLegend>\n <StyledTimePickerWheelWrapper $readOnlyStyles={readOnly || applyAriaDisabled}>\n <HoursList />\n <MinutesList />\n <MeridiemList />\n </StyledTimePickerWheelWrapper>\n <TimeWheelFooter />\n </StyledTimePickerContainer>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCjB;AAhCN,mBAAkC;AAClC,uBAAmD;AACnD,yCAAgD;AAChD,uBAA0B;AAC1B,0BAA6B;AAC7B,yBAA4B;AAC5B,qBAKO;AACP,6BAAgC;AAEzB,MAAM,mBAAmB,aAAAA,QAAM,KAAK,MAAM;AAC/C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,QAAI,yBAAW,kEAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,oDAAmC,qBAAqB;AAAA,MACrE,eAAe;AAAA,MACf,MAAK;AAAA,MACL,cAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,oDAAmC,UAAU;AAAA,YAC1D,eAAe;AAAA,YACf,aAAG,SAAS,IAAI,IAAI,WAAW,IAAI,IAAI,YAAY,IAAI;AAAA;AAAA,QAAG;AAAA,QAC5D,6CAAC,+
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { HoursList } from './HoursList.js';\nimport { MeridiemList } from './MeridiemList.js';\nimport { MinutesList } from './MinutesList.js';\nimport {\n StyledTimePickerContainer,\n StyledTimePickerHead,\n StyledTimePickerWheelsLegend,\n StyledTimePickerWheelWrapper,\n} from './Styleds.js';\nimport { TimeWheelFooter } from './TimeWheelFooter.js';\n\nexport const TimeWheelContent = React.memo(() => {\n const {\n isControllerOnly,\n hours,\n minutes,\n meridiem,\n getProps,\n props: { readOnly, applyAriaDisabled },\n } = useContext(ControlledDateTimePickerContext);\n\n return (\n <StyledTimePickerContainer\n isControllerOnly={isControllerOnly}\n data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL}\n getOwnerProps={getProps}\n role=\"region\"\n aria-label=\"timewheel\"\n >\n <StyledTimePickerHead\n data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL}\n getOwnerProps={getProps}\n >{`${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`}</StyledTimePickerHead>\n <StyledTimePickerWheelsLegend getOwnerProps={getProps}>\n <div>H</div>\n <div>M</div>\n <div>A</div>\n </StyledTimePickerWheelsLegend>\n <StyledTimePickerWheelWrapper $readOnlyStyles={readOnly || applyAriaDisabled} getOwnerProps={getProps}>\n <HoursList />\n <MinutesList />\n <MeridiemList />\n </StyledTimePickerWheelWrapper>\n <TimeWheelFooter />\n </StyledTimePickerContainer>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCjB;AAhCN,mBAAkC;AAClC,uBAAmD;AACnD,yCAAgD;AAChD,uBAA0B;AAC1B,0BAA6B;AAC7B,yBAA4B;AAC5B,qBAKO;AACP,6BAAgC;AAEzB,MAAM,mBAAmB,aAAAA,QAAM,KAAK,MAAM;AAC/C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,QAAI,yBAAW,kEAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,oDAAmC,qBAAqB;AAAA,MACrE,eAAe;AAAA,MACf,MAAK;AAAA,MACL,cAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,oDAAmC,UAAU;AAAA,YAC1D,eAAe;AAAA,YACf,aAAG,SAAS,IAAI,IAAI,WAAW,IAAI,IAAI,YAAY,IAAI;AAAA;AAAA,QAAG;AAAA,QAC5D,6CAAC,+CAA6B,eAAe,UAC3C;AAAA,sDAAC,SAAI,eAAC;AAAA,UACN,4CAAC,SAAI,eAAC;AAAA,UACN,4CAAC,SAAI,eAAC;AAAA,WACR;AAAA,QACA,6CAAC,+CAA6B,iBAAiB,YAAY,mBAAmB,eAAe,UAC3F;AAAA,sDAAC,8BAAU;AAAA,UACX,4CAAC,kCAAY;AAAA,UACb,4CAAC,oCAAa;AAAA,WAChB;AAAA,QACA,4CAAC,0CAAgB;AAAA;AAAA;AAAA,EACnB;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -48,14 +48,15 @@ const usePopperTriggerLogic = () => {
|
|
|
48
48
|
const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
|
|
49
49
|
const closeTimePicker = (0, import_react.useCallback)(() => {
|
|
50
50
|
setShowTimePicker(false);
|
|
51
|
-
onPickerClose();
|
|
52
|
-
}, [onPickerClose]);
|
|
51
|
+
if (!isWithCalendarToo) onPickerClose();
|
|
52
|
+
}, [isWithCalendarToo, onPickerClose]);
|
|
53
53
|
const handleToggleTimePicker = (0, import_react.useCallback)(() => {
|
|
54
54
|
if (disabled) return;
|
|
55
55
|
setShowTimePicker((oldShowCalendar) => {
|
|
56
|
+
if (isWithCalendarToo) return !oldShowCalendar;
|
|
56
57
|
if (!oldShowCalendar) {
|
|
57
58
|
onPickerOpen();
|
|
58
|
-
|
|
59
|
+
trackFocusTimewheelCurrHour();
|
|
59
60
|
} else onPickerClose();
|
|
60
61
|
return !oldShowCalendar;
|
|
61
62
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/Pickers/TimeWheel/usePopperTriggerLogic.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useState, useCallback, useMemo, useContext } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\n\ninterface PopperTriggerLogicT {\n referenceElement: HTMLButtonElement | null;\n showTimePicker: boolean;\n closeTimePicker: () => void;\n setShowTimePicker: TypescriptHelpersT.StateSetter<boolean>;\n handleToggleTimePicker: () => void;\n handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport const usePopperTriggerLogic = (): PopperTriggerLogicT => {\n const {\n pickerButtonRef,\n props: { onPickerClose, onPickerOpen, disabled },\n isWithCalendarToo,\n trackFocusTimewheelCurrHour,\n trackFocusPicker,\n latestInteractionRegion,\n currFocusDescriber,\n } = useContext(ControlledDateTimePickerContext);\n const [showTimePicker, setShowTimePicker] = useState(false);\n const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n const closeTimePicker = useCallback(() => {\n setShowTimePicker(false);\n onPickerClose();\n }, [onPickerClose]);\n const handleToggleTimePicker = useCallback(() => {\n if (disabled) return;\n setShowTimePicker((oldShowCalendar) => {\n if (!oldShowCalendar) {\n onPickerOpen();\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2D;AAE3D,yCAAgD;AAWzC,MAAM,wBAAwB,MAA2B;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,eAAe,cAAc,SAAS;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAC1D,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAmC,IAAI;
|
|
4
|
+
"sourcesContent": ["import { useState, useCallback, useMemo, useContext } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\n\ninterface PopperTriggerLogicT {\n referenceElement: HTMLButtonElement | null;\n showTimePicker: boolean;\n closeTimePicker: () => void;\n setShowTimePicker: TypescriptHelpersT.StateSetter<boolean>;\n handleToggleTimePicker: () => void;\n handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport const usePopperTriggerLogic = (): PopperTriggerLogicT => {\n const {\n pickerButtonRef,\n props: { onPickerClose, onPickerOpen, disabled },\n isWithCalendarToo,\n trackFocusTimewheelCurrHour,\n trackFocusPicker,\n latestInteractionRegion,\n currFocusDescriber,\n } = useContext(ControlledDateTimePickerContext);\n const [showTimePicker, setShowTimePicker] = useState(false);\n const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n // Mirror of the guard in `Calendar/usePopperTriggerLogic.tsx` \u2014 see the comment there. The flag\n // already gated the focus tracking below; it now gates the callbacks too.\n const closeTimePicker = useCallback(() => {\n setShowTimePicker(false);\n if (!isWithCalendarToo) onPickerClose();\n }, [isWithCalendarToo, onPickerClose]);\n const handleToggleTimePicker = useCallback(() => {\n if (disabled) return;\n setShowTimePicker((oldShowCalendar) => {\n if (isWithCalendarToo) return !oldShowCalendar;\n if (!oldShowCalendar) {\n onPickerOpen();\n trackFocusTimewheelCurrHour();\n } else onPickerClose();\n return !oldShowCalendar;\n });\n }, [disabled, isWithCalendarToo, onPickerClose, onPickerOpen, trackFocusTimewheelCurrHour]);\n\n const handleSetTriggerRef = useCallback(\n (newRef: HTMLButtonElement) => {\n pickerButtonRef.current = newRef;\n setReferenceElement(newRef);\n\n if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'time-picker-icon') newRef?.focus();\n },\n [currFocusDescriber, latestInteractionRegion, pickerButtonRef],\n );\n const handleMenuWrapperKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n if (key === 'Escape') {\n closeTimePicker();\n trackFocusPicker();\n }\n },\n [closeTimePicker, trackFocusPicker],\n );\n return useMemo(\n () => ({\n referenceElement,\n showTimePicker,\n setShowTimePicker,\n handleToggleTimePicker,\n handleSetTriggerRef,\n handleMenuWrapperKeyDown,\n closeTimePicker,\n }),\n [\n closeTimePicker,\n handleMenuWrapperKeyDown,\n handleSetTriggerRef,\n handleToggleTimePicker,\n referenceElement,\n showTimePicker,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2D;AAE3D,yCAAgD;AAWzC,MAAM,wBAAwB,MAA2B;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,eAAe,cAAc,SAAS;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAC1D,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAmC,IAAI;AAGvF,QAAM,sBAAkB,0BAAY,MAAM;AACxC,sBAAkB,KAAK;AACvB,QAAI,CAAC,kBAAmB,eAAc;AAAA,EACxC,GAAG,CAAC,mBAAmB,aAAa,CAAC;AACrC,QAAM,6BAAyB,0BAAY,MAAM;AAC/C,QAAI,SAAU;AACd,sBAAkB,CAAC,oBAAoB;AACrC,UAAI,kBAAmB,QAAO,CAAC;AAC/B,UAAI,CAAC,iBAAiB;AACpB,qBAAa;AACb,oCAA4B;AAAA,MAC9B,MAAO,eAAc;AACrB,aAAO,CAAC;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,mBAAmB,eAAe,cAAc,2BAA2B,CAAC;AAE1F,QAAM,0BAAsB;AAAA,IAC1B,CAAC,WAA8B;AAC7B,sBAAgB,UAAU;AAC1B,0BAAoB,MAAM;AAE1B,UAAI,4BAA4B,iBAAiB,uBAAuB,mBAAoB,SAAQ,MAAM;AAAA,IAC5G;AAAA,IACA,CAAC,oBAAoB,yBAAyB,eAAe;AAAA,EAC/D;AACA,QAAM,+BAA2B;AAAA,IAC/B,CAAC,MAAwC;AACvC,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,QAAQ,UAAU;AACpB,wBAAgB;AAChB,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,gBAAgB;AAAA,EACpC;AACA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,17 +32,14 @@ __export(Styleds_exports, {
|
|
|
32
32
|
StyledClearButton: () => StyledClearButton,
|
|
33
33
|
StyledColonSeparator: () => StyledColonSeparator,
|
|
34
34
|
StyledDateInput: () => StyledDateInput,
|
|
35
|
-
StyledDateInputsWrapperGrid: () => StyledDateInputsWrapperGrid,
|
|
36
35
|
StyledFocusWithIn: () => StyledFocusWithIn,
|
|
37
36
|
StyledHourInput: () => StyledHourInput,
|
|
38
37
|
StyledInputsWrapperGrid: () => StyledInputsWrapperGrid,
|
|
39
38
|
StyledMeridiemInput: () => StyledMeridiemInput,
|
|
40
|
-
StyledMin4DigitsInput: () => StyledMin4DigitsInput,
|
|
41
39
|
StyledMinuteInput: () => StyledMinuteInput,
|
|
42
40
|
StyledMonthInput: () => StyledMonthInput,
|
|
43
41
|
StyledPickersIconsWrapperGrid: () => StyledPickersIconsWrapperGrid,
|
|
44
42
|
StyledSeparator: () => StyledSeparator,
|
|
45
|
-
StyledTimeInputsWrapperGrid: () => StyledTimeInputsWrapperGrid,
|
|
46
43
|
StyledYearInput: () => StyledYearInput
|
|
47
44
|
});
|
|
48
45
|
module.exports = __toCommonJS(Styleds_exports);
|
|
@@ -74,12 +71,18 @@ const ResettedInput = (0, import_ds_system.styled)("input")`
|
|
|
74
71
|
color: ${import_ds_system.th.color("neutral-500")};
|
|
75
72
|
}
|
|
76
73
|
`;
|
|
77
|
-
const StyledSeparator = (0, import_ds_system.styled)(import_ds_grid.Grid
|
|
74
|
+
const StyledSeparator = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
75
|
+
name: import_constants.DSControlledDateTimePickerName,
|
|
76
|
+
slot: import_constants.FORM_DATE_TIME_PICKER_SLOTS.INPUTS_SEPARATOR
|
|
77
|
+
})`
|
|
78
78
|
padding-top: 2px;
|
|
79
79
|
margin: auto;
|
|
80
80
|
color: neutral-500;
|
|
81
81
|
`;
|
|
82
|
-
const StyledColonSeparator = (0, import_ds_system.styled)(import_ds_grid.Grid
|
|
82
|
+
const StyledColonSeparator = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
83
|
+
name: import_constants.DSControlledDateTimePickerName,
|
|
84
|
+
slot: import_constants.FORM_DATE_TIME_PICKER_SLOTS.TIME_INPUTS_COLON_SEPARATOR
|
|
85
|
+
})`
|
|
83
86
|
padding-bottom: 1px;
|
|
84
87
|
margin: auto;
|
|
85
88
|
`;
|
|
@@ -112,11 +115,6 @@ const StyledMeridiemInput = (0, import_ds_system.styled)(Styled2DigitsInput, {
|
|
|
112
115
|
name: import_constants.DSControlledDateTimePickerName,
|
|
113
116
|
slot: import_constants.DSControlledDateTimePickerSlots.TIME_INPUTS.MERIDIEM
|
|
114
117
|
})``;
|
|
115
|
-
const StyledMin4DigitsInput = (0, import_ds_system.styled)(ResettedInput)`
|
|
116
|
-
width: 100%;
|
|
117
|
-
height: 100%;
|
|
118
|
-
${({ disabled, theme }) => disabled ? `color: ${theme.colors.neutral[500]};` : ``}
|
|
119
|
-
`;
|
|
120
118
|
const StyledInputsWrapperGrid = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
121
119
|
name: import_constants.DSControlledDateTimePickerName,
|
|
122
120
|
slot: import_constants.DSControlledDateTimePickerSlots.CONTAINER
|
|
@@ -150,31 +148,10 @@ const StyledInputsWrapperGrid = (0, import_ds_system.styled)(import_ds_grid.Grid
|
|
|
150
148
|
background-color: ${theme.colors.neutral["050"]};
|
|
151
149
|
`}
|
|
152
150
|
`;
|
|
153
|
-
const
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
padding: 6px 0;
|
|
158
|
-
gap: 0px 0px;
|
|
159
|
-
align-items: center;
|
|
160
|
-
input,
|
|
161
|
-
p {
|
|
162
|
-
margin: 0;
|
|
163
|
-
}
|
|
164
|
-
`;
|
|
165
|
-
const StyledTimeInputsWrapperGrid = import_ds_system.styled.div`
|
|
166
|
-
display: grid;
|
|
167
|
-
grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;
|
|
168
|
-
grid-template-rows: min-content;
|
|
169
|
-
padding: 6px 0;
|
|
170
|
-
gap: 0px 0px;
|
|
171
|
-
align-items: center;
|
|
172
|
-
input,
|
|
173
|
-
p {
|
|
174
|
-
margin: 0;
|
|
175
|
-
}
|
|
176
|
-
`;
|
|
177
|
-
const StyledPickersIconsWrapperGrid = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
151
|
+
const StyledPickersIconsWrapperGrid = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
152
|
+
name: import_constants.DSControlledDateTimePickerName,
|
|
153
|
+
slot: import_constants.FORM_DATE_TIME_PICKER_SLOTS.PICKER_ICONS_WRAPPER
|
|
154
|
+
})`
|
|
178
155
|
position: relative;
|
|
179
156
|
${({ isControllerOnly }) => isControllerOnly ? `` : `height: 2rem;`}
|
|
180
157
|
:before {
|
|
@@ -191,7 +168,10 @@ const StyledPickersIconsWrapperGrid = (0, import_ds_system.styled)(import_ds_gri
|
|
|
191
168
|
`}
|
|
192
169
|
}
|
|
193
170
|
`;
|
|
194
|
-
const StyledFocusWithIn = (0, import_ds_system.styled)(import_ds_grid.Grid
|
|
171
|
+
const StyledFocusWithIn = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
172
|
+
name: import_constants.DSControlledDateTimePickerName,
|
|
173
|
+
slot: import_constants.FORM_DATE_TIME_PICKER_SLOTS.INPUTS_FOCUS_WITHIN
|
|
174
|
+
})`
|
|
195
175
|
position: relative;
|
|
196
176
|
&:focus-within {
|
|
197
177
|
&:after {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Styleds.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, th } from '@elliemae/ds-system';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, th } from '@elliemae/ds-system';\nimport {\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n FORM_DATE_TIME_PICKER_SLOTS,\n} from '../constants/index.js';\n\nconst ResettedInput = styled('input')`\n border: none;\n box-shadow: none;\n background: none;\n text-align: center;\n height: 100%;\n display: flex;\n align-items: center;\n :focus {\n outline: none;\n }\n :disabled {\n cursor: not-allowed;\n }\n padding-top: 2px;\n\n color: ${th.color('neutral-700')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n color: ${th.color('neutral-500')};\n }\n`;\n\nexport const StyledSeparator = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: FORM_DATE_TIME_PICKER_SLOTS.INPUTS_SEPARATOR,\n})`\n padding-top: 2px;\n margin: auto;\n color: neutral-500;\n`;\n\nexport const StyledColonSeparator = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: FORM_DATE_TIME_PICKER_SLOTS.TIME_INPUTS_COLON_SEPARATOR,\n})`\n padding-bottom: 1px;\n margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n width: 100%;\n height: 100%;\n ${({ disabled, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledDateInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.DAY,\n})``;\n\nexport const StyledMonthInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.MONTH,\n})``;\n\nexport const StyledYearInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.DATE_INPUTS.YEAR,\n})``;\n\nexport const StyledHourInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.HOUR,\n})``;\n\nexport const StyledMinuteInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MINUTE,\n})``;\n\nexport const StyledMeridiemInput = styled(Styled2DigitsInput, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MERIDIEM,\n})``;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTAINER,\n})<{\n isControllerOnly: boolean;\n onlyPicker: boolean;\n hasError: boolean;\n justPicker: boolean;\n disabled: boolean;\n $readOnlyStyles?: boolean;\n}>`\n width: max-content;\n align-items: center;\n background-color: white;\n ${({ isControllerOnly }) =>\n isControllerOnly\n ? ``\n : `\n height: 2.153rem; \n border-width: 1px;\n border-style: solid;\n `}\n\n border-color: ${({ theme, hasError }) => {\n if (hasError) return theme.colors.danger[900];\n return theme.colors.neutral[400];\n }};\n\n border-radius: 2px;\n padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n\n position: relative;\n ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n ${({ $readOnlyStyles, hasError, onlyPicker, theme }) =>\n $readOnlyStyles &&\n !hasError &&\n !onlyPicker &&\n `\n border-left: 1px solid ${theme.colors.neutral['080']};\n border-top: 1px solid ${theme.colors.neutral['080']};\n border-right: 1px solid ${theme.colors.neutral['080']};\n\n `}\n ${({ $readOnlyStyles, hasError, theme }) =>\n $readOnlyStyles &&\n !hasError &&\n `\n background-color: ${theme.colors.neutral['050']};\n `}\n`;\n\nexport const StyledPickersIconsWrapperGrid = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: FORM_DATE_TIME_PICKER_SLOTS.PICKER_ICONS_WRAPPER,\n})<{ isControllerOnly: boolean; hasError: boolean }>`\n position: relative;\n ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 2rem;`)}\n :before {\n content: '';\n position: absolute;\n top: 0px;\n left: -1px;\n width: 100%;\n height: 100%;\n // this shoudnt be rounded as specified in the design\n /* border-radius: 2px; */\n ${({ theme, isControllerOnly, hasError }) =>\n isControllerOnly\n ? ``\n : `\n border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[400]}\n `}\n }\n`;\n\nexport const StyledFocusWithIn = styled(Grid, {\n name: DSControlledDateTimePickerName,\n slot: FORM_DATE_TIME_PICKER_SLOTS.INPUTS_FOCUS_WITHIN,\n})`\n position: relative;\n &:focus-within {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: -5px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 10px);\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n border-radius: 2px;\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON,\n})<{ shouldDisplay: boolean }>`\n height: 26px;\n position: relative;\n visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n &:focus {\n &:after {\n z-index: 1;\n }\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2B;AAC3B,qBAAqB;AACrB,uBAA2B;AAC3B,uBAIO;AAEP,MAAM,oBAAgB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAgBzB,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,oBAAG,WAAW,SAAS,CAAC;AAAA,aAC9B,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAI7B,MAAM,sBAAkB,yBAAO,qBAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,6CAA4B;AACpC,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,6CAA4B;AACpC,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,yBAAqB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAG9E,MAAM,sBAAkB,yBAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,uBAAmB,yBAAO,oBAAoB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,sBAAkB,yBAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,sBAAkB,yBAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,wBAAoB,yBAAO,oBAAoB;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,0BAAsB,yBAAO,oBAAoB;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,iDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA,GAIL;AAAA;AAAA,kBAEe,CAAC,EAAE,OAAO,SAAS,MAAM;AACvC,MAAI,SAAU,QAAO,MAAM,OAAO,OAAO,GAAG;AAC5C,SAAO,MAAM,OAAO,QAAQ,GAAG;AACjC,CAAC;AAAA;AAAA;AAAA,kBAGe,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM,KAAM;AAAA;AAAA;AAAA,IAG5D,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA,IAC5F,CAAC,EAAE,iBAAiB,UAAU,YAAY,MAAM,MAChD,mBACA,CAAC,YACD,CAAC,cACD;AAAA,6BACyB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,4BAC5B,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,8BACzB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,GAEtD;AAAA,KACE,CAAC,EAAE,iBAAiB,UAAU,MAAM,MACpC,mBACA,CAAC,YACD;AAAA,wBACmB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,GAChD;AAAA;AAGI,MAAM,oCAAgC,yBAAO,qBAAM;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,6CAA4B;AACpC,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,KAAK,eAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUjE,CAAC,EAAE,OAAO,kBAAkB,SAAS,MACrC,mBACI,KACA;AAAA,6BACmB,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KACvF;AAAA;AAAA;AAIE,MAAM,wBAAoB,yBAAO,qBAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,6CAA4B;AACpC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWyB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,iDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,cAAc,MAAO,gBAAgB,YAAY,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -83,7 +83,7 @@ const TimeInputs = () => {
|
|
|
83
83
|
import_config.fixedValues.smallInputWidth
|
|
84
84
|
],
|
|
85
85
|
children: [
|
|
86
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledFocusWithIn, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
86
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledFocusWithIn, { getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
87
87
|
import_HHInput.HHInput,
|
|
88
88
|
{
|
|
89
89
|
value: hours,
|
|
@@ -103,8 +103,8 @@ const TimeInputs = () => {
|
|
|
103
103
|
readOnly
|
|
104
104
|
}
|
|
105
105
|
) }),
|
|
106
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledColonSeparator, { alignItems: "center", children: ":" }),
|
|
107
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledFocusWithIn, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
106
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledColonSeparator, { alignItems: "center", getOwnerProps: getProps, children: ":" }),
|
|
107
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledFocusWithIn, { getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
108
108
|
import_MinutesInput.MinutesInput,
|
|
109
109
|
{
|
|
110
110
|
value: minutes,
|
|
@@ -123,8 +123,8 @@ const TimeInputs = () => {
|
|
|
123
123
|
readOnly
|
|
124
124
|
}
|
|
125
125
|
) }),
|
|
126
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledSeparator, { children: " " }),
|
|
127
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledFocusWithIn, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
126
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledSeparator, { getOwnerProps: getProps, children: " " }),
|
|
127
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledFocusWithIn, { getOwnerProps: getProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
128
128
|
import_MeridiemInput.MeridiemInput,
|
|
129
129
|
{
|
|
130
130
|
value: meridiem,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/TimeInputs/TimeInputs.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { HHInput } from './HHInput.js';\nimport { MinutesInput } from './MinutesInput.js';\nimport { MeridiemInput } from './MeridiemInput.js';\nimport { useTimeInputs } from './useTimeInputs.js';\nimport { fixedValues } from '../config.js';\nimport { StyledColonSeparator, StyledSeparator, StyledFocusWithIn } from '../Styleds.js';\n\nexport const TimeInputs = (): JSX.Element => {\n const {\n autoFocusHourInput,\n disabled,\n applyAriaDisabled,\n onHoursChange,\n onMinutesChange,\n onMeridiemChange,\n onHoursBlur,\n onMinutesBlur,\n onMeridiemBlur,\n onHoursFocus,\n onMeridiemFocus,\n onMinutesFocus,\n onHoursKeyDown,\n onMinutesKeyDown,\n onMeridiemKeyDown,\n } = useTimeInputs();\n\n // we do this here so HHInput,MinutesInput, MeridiemInput can be pure components memoized via React.memo\n const {\n hours,\n minutes,\n meridiem,\n hourInputRef,\n minutesInputRef,\n meridiemInputRef,\n latestInteractionRegion,\n currFocusDescriber,\n getProps,\n props: { tabIndex, readOnly },\n } = useContext(ControlledDateTimePickerContext);\n\n return (\n <Grid\n cols={[\n fixedValues.smallInputWidth,\n fixedValues.separatorWidth,\n fixedValues.smallInputWidth,\n fixedValues.separatorWidth,\n fixedValues.smallInputWidth,\n ]}\n >\n <StyledFocusWithIn>\n <HHInput\n value={hours}\n onChange={onHoursChange}\n onBlur={onHoursBlur}\n onFocus={onHoursFocus}\n onKeyDown={onHoursKeyDown}\n contextRef={hourInputRef}\n tabIndex={tabIndex}\n placeholder=\"HH\"\n autoFocusHourInput={autoFocusHourInput}\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled}\n isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'hour-input'}\n getProps={getProps}\n readOnly={readOnly}\n />\n </StyledFocusWithIn>\n <StyledColonSeparator alignItems=\"center\"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4CnB;AA5CJ,mBAAkC;AAClC,qBAAqB;AACrB,yCAAgD;AAChD,qBAAwB;AACxB,0BAA6B;AAC7B,2BAA8B;AAC9B,2BAA8B;AAC9B,oBAA4B;AAC5B,qBAAyE;AAElE,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oCAAc;AAGlB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,SAAS;AAAA,EAC9B,QAAI,yBAAW,kEAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,MACd;AAAA,MAEA;AAAA,oDAAC,
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { HHInput } from './HHInput.js';\nimport { MinutesInput } from './MinutesInput.js';\nimport { MeridiemInput } from './MeridiemInput.js';\nimport { useTimeInputs } from './useTimeInputs.js';\nimport { fixedValues } from '../config.js';\nimport { StyledColonSeparator, StyledSeparator, StyledFocusWithIn } from '../Styleds.js';\n\nexport const TimeInputs = (): JSX.Element => {\n const {\n autoFocusHourInput,\n disabled,\n applyAriaDisabled,\n onHoursChange,\n onMinutesChange,\n onMeridiemChange,\n onHoursBlur,\n onMinutesBlur,\n onMeridiemBlur,\n onHoursFocus,\n onMeridiemFocus,\n onMinutesFocus,\n onHoursKeyDown,\n onMinutesKeyDown,\n onMeridiemKeyDown,\n } = useTimeInputs();\n\n // we do this here so HHInput,MinutesInput, MeridiemInput can be pure components memoized via React.memo\n const {\n hours,\n minutes,\n meridiem,\n hourInputRef,\n minutesInputRef,\n meridiemInputRef,\n latestInteractionRegion,\n currFocusDescriber,\n getProps,\n props: { tabIndex, readOnly },\n } = useContext(ControlledDateTimePickerContext);\n\n return (\n <Grid\n cols={[\n fixedValues.smallInputWidth,\n fixedValues.separatorWidth,\n fixedValues.smallInputWidth,\n fixedValues.separatorWidth,\n fixedValues.smallInputWidth,\n ]}\n >\n <StyledFocusWithIn getOwnerProps={getProps}>\n <HHInput\n value={hours}\n onChange={onHoursChange}\n onBlur={onHoursBlur}\n onFocus={onHoursFocus}\n onKeyDown={onHoursKeyDown}\n contextRef={hourInputRef}\n tabIndex={tabIndex}\n placeholder=\"HH\"\n autoFocusHourInput={autoFocusHourInput}\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled}\n isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'hour-input'}\n getProps={getProps}\n readOnly={readOnly}\n />\n </StyledFocusWithIn>\n <StyledColonSeparator alignItems=\"center\" getOwnerProps={getProps}>\n :\n </StyledColonSeparator>\n <StyledFocusWithIn getOwnerProps={getProps}>\n <MinutesInput\n value={minutes}\n onChange={onMinutesChange}\n onBlur={onMinutesBlur}\n onFocus={onMinutesFocus}\n onKeyDown={onMinutesKeyDown}\n contextRef={minutesInputRef}\n tabIndex={tabIndex}\n placeholder=\"MM\"\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled}\n isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'minute-input'}\n getProps={getProps}\n readOnly={readOnly}\n />\n </StyledFocusWithIn>\n <StyledSeparator getOwnerProps={getProps}> </StyledSeparator>\n <StyledFocusWithIn getOwnerProps={getProps}>\n <MeridiemInput\n value={meridiem}\n onChange={onMeridiemChange}\n onBlur={onMeridiemBlur}\n onFocus={onMeridiemFocus}\n onKeyDown={onMeridiemKeyDown}\n contextRef={meridiemInputRef}\n tabIndex={tabIndex}\n placeholder=\"AM\"\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled}\n isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'meridiem-input'}\n getProps={getProps}\n readOnly={readOnly}\n />\n </StyledFocusWithIn>\n </Grid>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4CnB;AA5CJ,mBAAkC;AAClC,qBAAqB;AACrB,yCAAgD;AAChD,qBAAwB;AACxB,0BAA6B;AAC7B,2BAA8B;AAC9B,2BAA8B;AAC9B,oBAA4B;AAC5B,qBAAyE;AAElE,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oCAAc;AAGlB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,SAAS;AAAA,EAC9B,QAAI,yBAAW,kEAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,MACd;AAAA,MAEA;AAAA,oDAAC,oCAAkB,eAAe,UAChC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,iBAAe;AAAA,YACf;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA,QACA,4CAAC,uCAAqB,YAAW,UAAS,eAAe,UAAU,eAEnE;AAAA,QACA,4CAAC,oCAAkB,eAAe,UAChC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA,iBAAe;AAAA,YACf;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA,QACA,4CAAC,kCAAgB,eAAe,UAAU,eAAC;AAAA,QAC3C,4CAAC,oCAAkB,eAAe,UAChC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA,iBAAe;AAAA,YACf;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -100,6 +100,8 @@ const propTypes = {
|
|
|
100
100
|
onHourChange: import_ds_props_helpers.PropTypes.func.description("(newHourString, event, metaInformations) => void"),
|
|
101
101
|
onMinuteChange: import_ds_props_helpers.PropTypes.func.description("(newMinuteString, event, metaInformations) => void"),
|
|
102
102
|
onMeridiemChange: import_ds_props_helpers.PropTypes.func.description("(newMeridiemString, event, metaInformations) => void"),
|
|
103
|
+
onPickerOpen: import_ds_props_helpers.PropTypes.func.description("() => void, called when the picker context menu is opened"),
|
|
104
|
+
onPickerClose: import_ds_props_helpers.PropTypes.func.description("() => void, called when the picker context menu is closed"),
|
|
103
105
|
getIsDisabledDay: import_ds_props_helpers.PropTypes.func.description(
|
|
104
106
|
"(dayAsString) => true for marking as disabled, false for marking as valid"
|
|
105
107
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport {\n PropTypes,\n getPropsPerDatatestIdPropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n type GlobalAttributesT,\n type ValidationMap,\n type XstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport type { ControlledDateTimePickerSlotEngine } from './slot-arguments-polymorphic-typescript.js';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlotsFlatten,\n} from './constants/index.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\n\nexport declare namespace DSControlledDateTimePickerT {\n export interface MetaMonthDay {\n day: Date;\n dayAsString: string;\n isPrevMonthDay: boolean;\n isNextMonthDay: boolean;\n isCurrMonthDay: boolean;\n isHidden: boolean;\n dayBtnRef: React.MutableRefObject<HTMLButtonElement>;\n }\n\n /**\n * Arguments passed to the function form of the `dsControlleddatetimepickerCalendarDay` slot.\n * The function receives these at render time via `getOwnerPropsArguments` \u2014 use them to\n * compute state-aware aria attributes (e.g. range-specific labels in ds-form-date-range-picker).\n */\n export type CalendarDaySlotArguments = {\n isSelected: boolean;\n isFocused: boolean;\n isDisabled: boolean;\n isOutOfRange: boolean;\n isStartRangeDay: boolean;\n isEndRangeDay: boolean;\n /** True for all days inside the range, including start and end. */\n isDayInRangeImproper: boolean;\n /** True only for days strictly between start and end (excludes start/end). */\n isDayInRange: boolean;\n metaDay: MetaMonthDay;\n };\n\n /**\n * Slot function signatures for a given type, with CalendarDaySlotArguments\n * applied as the typed override for dsControlleddatetimepickerCalendarDay.\n * Only slots that exist in the DOM for T are present \u2014 passing a slot prop\n * for a non-existent slot is a compile-time error.\n */\n export type Slots<T extends ControlledDateTimePickerSlotEngine.ControlTypes> =\n ControlledDateTimePickerSlotEngine.SlotFunctionArguments<\n T,\n {\n dsControlleddatetimepickerCalendarDay: (args: CalendarDaySlotArguments) => object;\n }\n >;\n\n /**\n * Prop-facing slot type for a given type: each slot accepts either a plain\n * object (static form) or the typed function (dynamic form). All slots optional.\n */\n export type PolymorphicSlots<T extends ControlledDateTimePickerSlotEngine.ControlTypes> =\n ControlledDateTimePickerSlotEngine.PolymorphicSlotFunctionArguments<\n T,\n {\n dsControlleddatetimepickerCalendarDay: (args: CalendarDaySlotArguments) => object;\n }\n >;\n\n type PropsT<Default, Required, Optional, SpecificHTMLElement> = Partial<Default> &\n Required &\n Optional &\n Omit<GlobalAttributesT<SpecificHTMLElement>, keyof Default | keyof Required | keyof Optional> &\n Omit<XstyledProps, keyof Default | keyof Required | keyof Optional>;\n\n type InternalPropsT<Default, Required, Optional, SpecificHTMLElement> = Default &\n Required &\n Optional &\n Omit<GlobalAttributesT<SpecificHTMLElement>, keyof Default | keyof Required | keyof Optional> &\n Omit<XstyledProps, keyof Default | keyof Required | keyof Optional>;\n type DataTestIdType = typeof ControlledDateTimePickerDatatestid;\n // typescript type that rapresents the union of all the values for ControlledDateTimePickerDatatestid\n export type FlatDataTestIdValues = {\n [K in keyof DataTestIdType]: DataTestIdType[K] extends Record<string, unknown>\n ? DataTestIdType[K][keyof DataTestIdType[K]] // this is only 1 level deep, but it's enough for our needs right now\n : // can be extended to more levels if needed as follows:\n // ? DataTestIdType[K][keyof DataTestIdType[K]] extends Record<string, unknown>\n // ? DataTestIdType[K][keyof DataTestIdType[K]][keyof DataTestIdType[K][keyof DataTestIdType[K]]]\n // : DataTestIdType[K][keyof DataTestIdType[K]]\n DataTestIdType[K];\n }[keyof DataTestIdType];\n\n export type OnInternalValuesChangeEvent =\n | React.ChangeEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLButtonElement>\n | React.KeyboardEvent\n | React.MouseEvent<HTMLInputElement>\n | React.MouseEvent<HTMLButtonElement>\n | React.MouseEvent<HTMLDivElement>;\n\n export type ControlTypes =\n | 'full-date-time'\n | 'date-time-inputs'\n | 'date-time-picker'\n | 'date-time-picker-controller-only'\n | 'full-date'\n | 'date-inputs'\n | 'date-picker'\n | 'date-picker-controller-only'\n | 'full-time'\n | 'time-inputs'\n | 'time-picker'\n | 'time-picker-controller-only';\n export interface InternalInputsChangeMetaInfo {\n isAutomaticFillTrigger?: boolean;\n isDayPresentInMonth?: boolean;\n isOutOfRangeDay?: boolean;\n isDisabledDay?: boolean;\n isDisabledTime?: boolean;\n suggestedErrorMsg?: string;\n newDateTimeString?: string;\n newDateString?: string;\n newTimeString?: string;\n }\n\n export type OnDateChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n export type OnTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n export type OnDateTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n export type OnInternalInputsChange = (\n val: string,\n e: OnInternalValuesChangeEvent,\n metaInfo?: InternalInputsChangeMetaInfo,\n ) => void;\n export type AppOnInputChange = (\n val: string,\n e: OnInternalValuesChangeEvent,\n metaInfo: InternalInputsChangeMetaInfo,\n ) => void;\n\n /* ------------------------ ------------------ ------------------------*/\n /* ------------------------ DATE CONFIGURATION ------------------------*/\n /* ------------------------ ------------------ ------------------------*/\n export interface DefaultDateProps {\n onMonthChange: AppOnInputChange;\n onDayChange: AppOnInputChange;\n onYearChange: AppOnInputChange;\n onPickerOpen: TypescriptHelpersT.VoidGenericFunc;\n onPickerClose: TypescriptHelpersT.VoidGenericFunc;\n getIsDisabledDay: TypescriptHelpersT.BooleanGetter<string>;\n getIsOutOfRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n getIsStartRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n getIsDayInRange: TypescriptHelpersT.BooleanGetter<string>;\n getIsEndRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n isClearable: boolean;\n disabled: boolean;\n readOnly: boolean;\n hasError: boolean;\n autoFocus: boolean;\n preventCloseOnSelection: boolean;\n }\n export interface OptionalDatePickerProps extends PolymorphicSlots<'full-date'> {\n applyAriaDisabled?: boolean;\n emptyPickerStartingMonth?: string;\n onCalendarOpenFocusedDay?: string;\n pickerFooterMsg?: string;\n innerRef?:\n | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n lastElementRef?: React.MutableRefObject<HTMLElement | null>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n fromDate?: string;\n toDate?: string;\n }\n export interface RequiredDatePickerProps {\n type: 'full-date' | 'date-inputs' | 'date-picker' | 'date-picker-controller-only';\n date: string;\n onDateChange: OnDateChange;\n }\n export type DatePickerProps = PropsT<\n Partial<DefaultDateProps>,\n RequiredDatePickerProps,\n OptionalDatePickerProps,\n HTMLDivElement\n >;\n\n export type InternalDatePickerProps = InternalPropsT<\n DefaultDateProps,\n RequiredDatePickerProps,\n OptionalDatePickerProps,\n HTMLDivElement\n >;\n\n /* ------------------------ ------------------ ------------------------*/\n /* ------------------------ TIME CONFIGURATION ------------------------*/\n /* ------------------------ ------------------ ------------------------*/\n\n export interface DefaultTimeProps {\n onHourChange: AppOnInputChange;\n onMinuteChange: AppOnInputChange;\n onMeridiemChange: AppOnInputChange;\n onPickerOpen: TypescriptHelpersT.VoidGenericFunc;\n onPickerClose: TypescriptHelpersT.VoidGenericFunc;\n getIsDisabledTime: TypescriptHelpersT.BooleanGetter<string>;\n minutesInterval: number;\n isClearable: boolean;\n disabled: boolean;\n readOnly: boolean;\n hasError: boolean;\n autoFocus: boolean;\n preventCloseOnSelection: boolean;\n }\n export interface OptionalTimePickerProps extends PolymorphicSlots<'full-time'> {\n applyAriaDisabled?: boolean;\n pickerFooterMsg?: string;\n onTimeWheelOpenStartingTime?: string;\n innerRef?:\n | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n lastElementRef?: React.MutableRefObject<HTMLElement | null>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n }\n export interface RequiredTimePickerProps {\n type: 'full-time' | 'time-inputs' | 'time-picker' | 'time-picker-controller-only';\n time: string;\n onTimeChange: OnTimeChange;\n }\n export type TimePickerProps = PropsT<\n Partial<DefaultTimeProps>,\n RequiredTimePickerProps,\n OptionalTimePickerProps,\n HTMLDivElement\n >;\n\n export type InternalTimePickerProps = InternalPropsT<\n DefaultTimeProps,\n RequiredTimePickerProps,\n OptionalTimePickerProps,\n HTMLDivElement\n >;\n\n /* -------------------- ---------------------- ------------------------*/\n /* -------------------- DATETIME CONFIGURATION ------------------------*/\n /* -------------------- ---------------------- ------------------------*/\n\n export type DefaultDateTimeProps = DefaultTimeProps &\n DefaultDateProps & {\n onDateChange: OnDateChange;\n onTimeChange: OnTimeChange;\n };\n export type OptionalDateTimeProps = OptionalTimePickerProps &\n OptionalDatePickerProps &\n PolymorphicSlots<'full-date-time'>;\n export interface RequiredDateTimeProps {\n type: 'full-date-time' | 'date-time-inputs' | 'date-time-picker' | 'date-time-picker-controller-only';\n dateTime: string;\n onDateTimeChange: OnDateTimeChange;\n }\n\n export type DateTimePickerProps = PropsT<\n Partial<DefaultDateTimeProps>,\n RequiredDateTimeProps,\n OptionalDateTimeProps,\n HTMLDivElement\n >;\n export type InternalDateTimePickerProps = InternalPropsT<\n DefaultDateTimeProps,\n RequiredDateTimeProps,\n OptionalDateTimeProps,\n HTMLDivElement\n >;\n\n /* ---------------------- ------------------- -------------------------*/\n /* ---------------------- FINAL CONFIGURATION -------------------------*/\n /* ---------------------- ------------------- -------------------------*/\n export type DefaultProps = DefaultDateTimeProps & { type: 'full-date-time' };\n\n export type Props = DateTimePickerProps | DatePickerProps | TimePickerProps;\n export type InternalProps = InternalDateTimePickerProps | InternalDatePickerProps | InternalTimePickerProps;\n}\n\nexport const defaultProps: DSControlledDateTimePickerT.DefaultProps = {\n type: 'full-date-time',\n onDateChange: noop,\n onMonthChange: noop,\n onDayChange: noop,\n onYearChange: noop,\n onTimeChange: noop,\n onHourChange: noop,\n onMinuteChange: noop,\n onMeridiemChange: noop,\n onPickerOpen: noop,\n onPickerClose: noop,\n getIsDisabledDay: defaultReturnFalse,\n getIsOutOfRangeDay: defaultReturnFalse,\n getIsStartRangeDay: defaultReturnFalse,\n getIsDayInRange: defaultReturnFalse,\n getIsEndRangeDay: defaultReturnFalse,\n getIsDisabledTime: defaultReturnFalse,\n minutesInterval: 1,\n isClearable: false,\n disabled: false,\n readOnly: false,\n hasError: false,\n autoFocus: false,\n preventCloseOnSelection: false,\n};\n\nexport const propTypes = {\n ...getPropsPerSlotPropTypes(DSControlledDateTimePickerName, DSControlledDateTimePickerSlotsFlatten),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n type: PropTypes.oneOf([\n 'full-date-time',\n 'date-time-inputs',\n 'date-time-picker',\n 'date-time-picker-controller-only',\n 'full-date',\n 'date-inputs',\n 'date-picker',\n 'date-picker-controller-only',\n 'full-time',\n 'time-inputs',\n 'time-picker',\n 'time-picker-controller-only',\n ])\n .description('Type of time form control to use')\n .defaultValue('full-date-time'),\n disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue(false),\n applyAriaDisabled: PropTypes.bool.description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n ),\n readOnly: PropTypes.bool\n .description('Makes the component non-editable while remaining accessible')\n .defaultValue(false),\n isClearable: PropTypes.bool.description('with or without clearable button').defaultValue(false),\n dateTime: PropTypes.string.description('when using date-time types, this is the value of the controller'),\n date: PropTypes.string.description('when using date types, this is the value of the controller'),\n time: PropTypes.string.description('when using time types, this is the value of the controller'),\n onDateChange: PropTypes.func.description('(newDateString, metaInformations) => void'),\n onTimeChange: PropTypes.func.description('(newTimeString, metaInformations) => void'),\n onDateTimeChange: PropTypes.func.description('(newDateTimeString, metaInformations) => void'),\n onMonthChange: PropTypes.func.description('(newMonthString, event, metaInformations) => void'),\n onDayChange: PropTypes.func.description('(newDayString, event, metaInformations) => void'),\n onYearChange: PropTypes.func.description('(newYearString, event, metaInformations) => void'),\n onHourChange: PropTypes.func.description('(newHourString, event, metaInformations) => void'),\n onMinuteChange: PropTypes.func.description('(newMinuteString, event, metaInformations) => void'),\n onMeridiemChange: PropTypes.func.description('(newMeridiemString, event, metaInformations) => void'),\n getIsDisabledDay: PropTypes.func.description(\n '(dayAsString) => true for marking as disabled, false for marking as valid',\n ),\n getIsOutOfRangeDay: PropTypes.func.description(\n '(dayAsString) => true for marking as disabled, false for marking as valid',\n ),\n getIsDisabledTime: PropTypes.func.description(\n '(timeAsString) => true for marking as disabled, false for marking as valid',\n ),\n emptyPickerStartingMonth: PropTypes.string.description(\n 'which month to start the calendar on open, when value is empty, string following the \"MM/__/YYYY\" pattern',\n ),\n onCalendarOpenFocusedDay: PropTypes.string\n .description('which day to focus on calendar open when value is empty, string following the \"MM/DD/YYYY\" pattern')\n .defaultValue('if value is empty current month, else current month'),\n onTimeWheelOpenStartingTime: PropTypes.string\n .description(\n 'which day to start the timewheel on picker open when value is empty, string following the HH:MM AA\" pattern',\n )\n .defaultValue('01:00 AM'),\n minutesInterval: PropTypes.number\n .description('increments/decrements of minutes in time related controllers interactions')\n .defaultValue('1'),\n 'data-testid': PropTypes.string.description('Unique id for tests.').defaultValue(''),\n ...getPropsPerDatatestIdPropTypes(ControlledDateTimePickerDatatestid),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('inner ref for the month input'),\n lastElementRef: PropTypes.oneOfType([PropTypes.object]).description(\n 'ref for the last focusable element in the component based on its configuration, used for focus management in focus trap logic',\n ),\n fromDate: PropTypes.string.description(\n `Strictly formatted string representing user's selected \"from\" date, this prop comes from the DateRangePicker and it's used internally for the range selection announcement`,\n ),\n toDate: PropTypes.string.description(\n `Strictly formatted string representing user's selected \"to\" date, this prop comes from the DateRangePicker and it's used internally for the range selection announcement`,\n ),\n hasError: PropTypes.bool.description('whether the input has error or not').defaultValue(false),\n} as unknown as ValidationMap<DSControlledDateTimePickerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport {\n PropTypes,\n getPropsPerDatatestIdPropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n type GlobalAttributesT,\n type ValidationMap,\n type XstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport type { ControlledDateTimePickerSlotEngine } from './slot-arguments-polymorphic-typescript.js';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlotsFlatten,\n} from './constants/index.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\n\nexport declare namespace DSControlledDateTimePickerT {\n export interface MetaMonthDay {\n day: Date;\n dayAsString: string;\n isPrevMonthDay: boolean;\n isNextMonthDay: boolean;\n isCurrMonthDay: boolean;\n isHidden: boolean;\n dayBtnRef: React.MutableRefObject<HTMLButtonElement>;\n }\n\n /**\n * Arguments passed to the function form of the `dsControlleddatetimepickerCalendarDay` slot.\n * The function receives these at render time via `getOwnerPropsArguments` \u2014 use them to\n * compute state-aware aria attributes (e.g. range-specific labels in ds-form-date-range-picker).\n */\n export type CalendarDaySlotArguments = {\n isSelected: boolean;\n isFocused: boolean;\n isDisabled: boolean;\n isOutOfRange: boolean;\n isStartRangeDay: boolean;\n isEndRangeDay: boolean;\n /** True for all days inside the range, including start and end. */\n isDayInRangeImproper: boolean;\n /** True only for days strictly between start and end (excludes start/end). */\n isDayInRange: boolean;\n metaDay: MetaMonthDay;\n };\n\n /**\n * Slot function signatures for a given type, with CalendarDaySlotArguments\n * applied as the typed override for dsControlleddatetimepickerCalendarDay.\n * Only slots that exist in the DOM for T are present \u2014 passing a slot prop\n * for a non-existent slot is a compile-time error.\n */\n export type Slots<T extends ControlledDateTimePickerSlotEngine.ControlTypes> =\n ControlledDateTimePickerSlotEngine.SlotFunctionArguments<\n T,\n {\n dsControlleddatetimepickerCalendarDay: (args: CalendarDaySlotArguments) => object;\n }\n >;\n\n /**\n * Prop-facing slot type for a given type: each slot accepts either a plain\n * object (static form) or the typed function (dynamic form). All slots optional.\n */\n export type PolymorphicSlots<T extends ControlledDateTimePickerSlotEngine.ControlTypes> =\n ControlledDateTimePickerSlotEngine.PolymorphicSlotFunctionArguments<\n T,\n {\n dsControlleddatetimepickerCalendarDay: (args: CalendarDaySlotArguments) => object;\n }\n >;\n\n type PropsT<Default, Required, Optional, SpecificHTMLElement> = Partial<Default> &\n Required &\n Optional &\n Omit<GlobalAttributesT<SpecificHTMLElement>, keyof Default | keyof Required | keyof Optional> &\n Omit<XstyledProps, keyof Default | keyof Required | keyof Optional>;\n\n type InternalPropsT<Default, Required, Optional, SpecificHTMLElement> = Default &\n Required &\n Optional &\n Omit<GlobalAttributesT<SpecificHTMLElement>, keyof Default | keyof Required | keyof Optional> &\n Omit<XstyledProps, keyof Default | keyof Required | keyof Optional>;\n type DataTestIdType = typeof ControlledDateTimePickerDatatestid;\n // typescript type that rapresents the union of all the values for ControlledDateTimePickerDatatestid\n export type FlatDataTestIdValues = {\n [K in keyof DataTestIdType]: DataTestIdType[K] extends Record<string, unknown>\n ? DataTestIdType[K][keyof DataTestIdType[K]] // this is only 1 level deep, but it's enough for our needs right now\n : // can be extended to more levels if needed as follows:\n // ? DataTestIdType[K][keyof DataTestIdType[K]] extends Record<string, unknown>\n // ? DataTestIdType[K][keyof DataTestIdType[K]][keyof DataTestIdType[K][keyof DataTestIdType[K]]]\n // : DataTestIdType[K][keyof DataTestIdType[K]]\n DataTestIdType[K];\n }[keyof DataTestIdType];\n\n export type OnInternalValuesChangeEvent =\n | React.ChangeEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLButtonElement>\n | React.KeyboardEvent\n | React.MouseEvent<HTMLInputElement>\n | React.MouseEvent<HTMLButtonElement>\n | React.MouseEvent<HTMLDivElement>;\n\n export type ControlTypes =\n | 'full-date-time'\n | 'date-time-inputs'\n | 'date-time-picker'\n | 'date-time-picker-controller-only'\n | 'full-date'\n | 'date-inputs'\n | 'date-picker'\n | 'date-picker-controller-only'\n | 'full-time'\n | 'time-inputs'\n | 'time-picker'\n | 'time-picker-controller-only';\n export interface InternalInputsChangeMetaInfo {\n isAutomaticFillTrigger?: boolean;\n isDayPresentInMonth?: boolean;\n isOutOfRangeDay?: boolean;\n isDisabledDay?: boolean;\n isDisabledTime?: boolean;\n suggestedErrorMsg?: string;\n newDateTimeString?: string;\n newDateString?: string;\n newTimeString?: string;\n }\n\n export type OnDateChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n export type OnTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n export type OnDateTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n export type OnInternalInputsChange = (\n val: string,\n e: OnInternalValuesChangeEvent,\n metaInfo?: InternalInputsChangeMetaInfo,\n ) => void;\n export type AppOnInputChange = (\n val: string,\n e: OnInternalValuesChangeEvent,\n metaInfo: InternalInputsChangeMetaInfo,\n ) => void;\n\n /* ------------------------ ------------------ ------------------------*/\n /* ------------------------ DATE CONFIGURATION ------------------------*/\n /* ------------------------ ------------------ ------------------------*/\n export interface DefaultDateProps {\n onMonthChange: AppOnInputChange;\n onDayChange: AppOnInputChange;\n onYearChange: AppOnInputChange;\n onPickerOpen: TypescriptHelpersT.VoidGenericFunc;\n onPickerClose: TypescriptHelpersT.VoidGenericFunc;\n getIsDisabledDay: TypescriptHelpersT.BooleanGetter<string>;\n getIsOutOfRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n getIsStartRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n getIsDayInRange: TypescriptHelpersT.BooleanGetter<string>;\n getIsEndRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n isClearable: boolean;\n disabled: boolean;\n readOnly: boolean;\n hasError: boolean;\n autoFocus: boolean;\n preventCloseOnSelection: boolean;\n }\n export interface OptionalDatePickerProps extends PolymorphicSlots<'full-date'> {\n applyAriaDisabled?: boolean;\n emptyPickerStartingMonth?: string;\n onCalendarOpenFocusedDay?: string;\n pickerFooterMsg?: string;\n innerRef?:\n | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n lastElementRef?: React.MutableRefObject<HTMLElement | null>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n fromDate?: string;\n toDate?: string;\n }\n export interface RequiredDatePickerProps {\n type: 'full-date' | 'date-inputs' | 'date-picker' | 'date-picker-controller-only';\n date: string;\n onDateChange: OnDateChange;\n }\n export type DatePickerProps = PropsT<\n Partial<DefaultDateProps>,\n RequiredDatePickerProps,\n OptionalDatePickerProps,\n HTMLDivElement\n >;\n\n export type InternalDatePickerProps = InternalPropsT<\n DefaultDateProps,\n RequiredDatePickerProps,\n OptionalDatePickerProps,\n HTMLDivElement\n >;\n\n /* ------------------------ ------------------ ------------------------*/\n /* ------------------------ TIME CONFIGURATION ------------------------*/\n /* ------------------------ ------------------ ------------------------*/\n\n export interface DefaultTimeProps {\n onHourChange: AppOnInputChange;\n onMinuteChange: AppOnInputChange;\n onMeridiemChange: AppOnInputChange;\n onPickerOpen: TypescriptHelpersT.VoidGenericFunc;\n onPickerClose: TypescriptHelpersT.VoidGenericFunc;\n getIsDisabledTime: TypescriptHelpersT.BooleanGetter<string>;\n minutesInterval: number;\n isClearable: boolean;\n disabled: boolean;\n readOnly: boolean;\n hasError: boolean;\n autoFocus: boolean;\n preventCloseOnSelection: boolean;\n }\n export interface OptionalTimePickerProps extends PolymorphicSlots<'full-time'> {\n applyAriaDisabled?: boolean;\n pickerFooterMsg?: string;\n onTimeWheelOpenStartingTime?: string;\n innerRef?:\n | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n lastElementRef?: React.MutableRefObject<HTMLElement | null>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n }\n export interface RequiredTimePickerProps {\n type: 'full-time' | 'time-inputs' | 'time-picker' | 'time-picker-controller-only';\n time: string;\n onTimeChange: OnTimeChange;\n }\n export type TimePickerProps = PropsT<\n Partial<DefaultTimeProps>,\n RequiredTimePickerProps,\n OptionalTimePickerProps,\n HTMLDivElement\n >;\n\n export type InternalTimePickerProps = InternalPropsT<\n DefaultTimeProps,\n RequiredTimePickerProps,\n OptionalTimePickerProps,\n HTMLDivElement\n >;\n\n /* -------------------- ---------------------- ------------------------*/\n /* -------------------- DATETIME CONFIGURATION ------------------------*/\n /* -------------------- ---------------------- ------------------------*/\n\n export type DefaultDateTimeProps = DefaultTimeProps &\n DefaultDateProps & {\n onDateChange: OnDateChange;\n onTimeChange: OnTimeChange;\n };\n export type OptionalDateTimeProps = OptionalTimePickerProps &\n OptionalDatePickerProps &\n PolymorphicSlots<'full-date-time'>;\n export interface RequiredDateTimeProps {\n type: 'full-date-time' | 'date-time-inputs' | 'date-time-picker' | 'date-time-picker-controller-only';\n dateTime: string;\n onDateTimeChange: OnDateTimeChange;\n }\n\n export type DateTimePickerProps = PropsT<\n Partial<DefaultDateTimeProps>,\n RequiredDateTimeProps,\n OptionalDateTimeProps,\n HTMLDivElement\n >;\n export type InternalDateTimePickerProps = InternalPropsT<\n DefaultDateTimeProps,\n RequiredDateTimeProps,\n OptionalDateTimeProps,\n HTMLDivElement\n >;\n\n /* ---------------------- ------------------- -------------------------*/\n /* ---------------------- FINAL CONFIGURATION -------------------------*/\n /* ---------------------- ------------------- -------------------------*/\n export type DefaultProps = DefaultDateTimeProps & { type: 'full-date-time' };\n\n export type Props = DateTimePickerProps | DatePickerProps | TimePickerProps;\n export type InternalProps = InternalDateTimePickerProps | InternalDatePickerProps | InternalTimePickerProps;\n}\n\nexport const defaultProps: DSControlledDateTimePickerT.DefaultProps = {\n type: 'full-date-time',\n onDateChange: noop,\n onMonthChange: noop,\n onDayChange: noop,\n onYearChange: noop,\n onTimeChange: noop,\n onHourChange: noop,\n onMinuteChange: noop,\n onMeridiemChange: noop,\n onPickerOpen: noop,\n onPickerClose: noop,\n getIsDisabledDay: defaultReturnFalse,\n getIsOutOfRangeDay: defaultReturnFalse,\n getIsStartRangeDay: defaultReturnFalse,\n getIsDayInRange: defaultReturnFalse,\n getIsEndRangeDay: defaultReturnFalse,\n getIsDisabledTime: defaultReturnFalse,\n minutesInterval: 1,\n isClearable: false,\n disabled: false,\n readOnly: false,\n hasError: false,\n autoFocus: false,\n preventCloseOnSelection: false,\n};\n\nexport const propTypes = {\n ...getPropsPerSlotPropTypes(DSControlledDateTimePickerName, DSControlledDateTimePickerSlotsFlatten),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n type: PropTypes.oneOf([\n 'full-date-time',\n 'date-time-inputs',\n 'date-time-picker',\n 'date-time-picker-controller-only',\n 'full-date',\n 'date-inputs',\n 'date-picker',\n 'date-picker-controller-only',\n 'full-time',\n 'time-inputs',\n 'time-picker',\n 'time-picker-controller-only',\n ])\n .description('Type of time form control to use')\n .defaultValue('full-date-time'),\n disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue(false),\n applyAriaDisabled: PropTypes.bool.description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n ),\n readOnly: PropTypes.bool\n .description('Makes the component non-editable while remaining accessible')\n .defaultValue(false),\n isClearable: PropTypes.bool.description('with or without clearable button').defaultValue(false),\n dateTime: PropTypes.string.description('when using date-time types, this is the value of the controller'),\n date: PropTypes.string.description('when using date types, this is the value of the controller'),\n time: PropTypes.string.description('when using time types, this is the value of the controller'),\n onDateChange: PropTypes.func.description('(newDateString, metaInformations) => void'),\n onTimeChange: PropTypes.func.description('(newTimeString, metaInformations) => void'),\n onDateTimeChange: PropTypes.func.description('(newDateTimeString, metaInformations) => void'),\n onMonthChange: PropTypes.func.description('(newMonthString, event, metaInformations) => void'),\n onDayChange: PropTypes.func.description('(newDayString, event, metaInformations) => void'),\n onYearChange: PropTypes.func.description('(newYearString, event, metaInformations) => void'),\n onHourChange: PropTypes.func.description('(newHourString, event, metaInformations) => void'),\n onMinuteChange: PropTypes.func.description('(newMinuteString, event, metaInformations) => void'),\n onMeridiemChange: PropTypes.func.description('(newMeridiemString, event, metaInformations) => void'),\n onPickerOpen: PropTypes.func.description('() => void, called when the picker context menu is opened'),\n onPickerClose: PropTypes.func.description('() => void, called when the picker context menu is closed'),\n getIsDisabledDay: PropTypes.func.description(\n '(dayAsString) => true for marking as disabled, false for marking as valid',\n ),\n getIsOutOfRangeDay: PropTypes.func.description(\n '(dayAsString) => true for marking as disabled, false for marking as valid',\n ),\n getIsDisabledTime: PropTypes.func.description(\n '(timeAsString) => true for marking as disabled, false for marking as valid',\n ),\n emptyPickerStartingMonth: PropTypes.string.description(\n 'which month to start the calendar on open, when value is empty, string following the \"MM/__/YYYY\" pattern',\n ),\n onCalendarOpenFocusedDay: PropTypes.string\n .description('which day to focus on calendar open when value is empty, string following the \"MM/DD/YYYY\" pattern')\n .defaultValue('if value is empty current month, else current month'),\n onTimeWheelOpenStartingTime: PropTypes.string\n .description(\n 'which day to start the timewheel on picker open when value is empty, string following the HH:MM AA\" pattern',\n )\n .defaultValue('01:00 AM'),\n minutesInterval: PropTypes.number\n .description('increments/decrements of minutes in time related controllers interactions')\n .defaultValue('1'),\n 'data-testid': PropTypes.string.description('Unique id for tests.').defaultValue(''),\n ...getPropsPerDatatestIdPropTypes(ControlledDateTimePickerDatatestid),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('inner ref for the month input'),\n lastElementRef: PropTypes.oneOfType([PropTypes.object]).description(\n 'ref for the last focusable element in the component based on its configuration, used for focus management in focus trap logic',\n ),\n fromDate: PropTypes.string.description(\n `Strictly formatted string representing user's selected \"from\" date, this prop comes from the DateRangePicker and it's used internally for the range selection announcement`,\n ),\n toDate: PropTypes.string.description(\n `Strictly formatted string representing user's selected \"to\" date, this prop comes from the DateRangePicker and it's used internally for the range selection announcement`,\n ),\n hasError: PropTypes.bool.description('whether the input has error or not').defaultValue(false),\n} as unknown as ValidationMap<DSControlledDateTimePickerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|