@elliemae/ds-form-date-time-picker 3.70.0-next.4 → 3.70.0-next.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/DateInputs/DDInput.js +2 -3
- package/dist/cjs/parts/DateInputs/DDInput.js.map +2 -2
- package/dist/cjs/parts/DateInputs/DateInputs.js +0 -4
- package/dist/cjs/parts/DateInputs/DateInputs.js.map +2 -2
- package/dist/cjs/parts/DateInputs/MMInput.js +2 -3
- package/dist/cjs/parts/DateInputs/MMInput.js.map +2 -2
- package/dist/cjs/parts/DateInputs/YYYYInput.js +2 -3
- package/dist/cjs/parts/DateInputs/YYYYInput.js.map +2 -2
- package/dist/cjs/parts/Pickers/Calendar/CalendarWrapper.js +19 -7
- package/dist/cjs/parts/Pickers/Calendar/CalendarWrapper.js.map +2 -2
- package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js +20 -8
- package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelWrapper.js +19 -7
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelWrapper.js.map +2 -2
- package/dist/cjs/parts/TimeInputs/HHInput.js +2 -3
- package/dist/cjs/parts/TimeInputs/HHInput.js.map +2 -2
- package/dist/cjs/parts/TimeInputs/MeridiemInput.js +1 -2
- package/dist/cjs/parts/TimeInputs/MeridiemInput.js.map +2 -2
- package/dist/cjs/parts/TimeInputs/MinutesInput.js +2 -3
- package/dist/cjs/parts/TimeInputs/MinutesInput.js.map +2 -2
- package/dist/cjs/parts/TimeInputs/TimeInputs.js +0 -4
- package/dist/cjs/parts/TimeInputs/TimeInputs.js.map +2 -2
- package/dist/esm/parts/DateInputs/DDInput.js +2 -3
- package/dist/esm/parts/DateInputs/DDInput.js.map +2 -2
- package/dist/esm/parts/DateInputs/DateInputs.js +0 -4
- package/dist/esm/parts/DateInputs/DateInputs.js.map +2 -2
- package/dist/esm/parts/DateInputs/MMInput.js +2 -3
- package/dist/esm/parts/DateInputs/MMInput.js.map +2 -2
- package/dist/esm/parts/DateInputs/YYYYInput.js +2 -3
- package/dist/esm/parts/DateInputs/YYYYInput.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarWrapper.js +19 -7
- package/dist/esm/parts/Pickers/Calendar/CalendarWrapper.js.map +2 -2
- package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js +20 -8
- package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelWrapper.js +19 -7
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelWrapper.js.map +2 -2
- package/dist/esm/parts/TimeInputs/HHInput.js +2 -3
- package/dist/esm/parts/TimeInputs/HHInput.js.map +2 -2
- package/dist/esm/parts/TimeInputs/MeridiemInput.js +1 -2
- package/dist/esm/parts/TimeInputs/MeridiemInput.js.map +2 -2
- package/dist/esm/parts/TimeInputs/MinutesInput.js +2 -3
- package/dist/esm/parts/TimeInputs/MinutesInput.js.map +2 -2
- package/dist/esm/parts/TimeInputs/TimeInputs.js +0 -4
- package/dist/esm/parts/TimeInputs/TimeInputs.js.map +2 -2
- package/dist/types/parts/DateInputs/DDInput.d.ts +1 -2
- package/dist/types/parts/DateInputs/MMInput.d.ts +1 -2
- package/dist/types/parts/DateInputs/YYYYInput.d.ts +1 -2
- package/dist/types/parts/TimeInputs/HHInput.d.ts +1 -2
- package/dist/types/parts/TimeInputs/MeridiemInput.d.ts +1 -2
- package/dist/types/parts/TimeInputs/MinutesInput.d.ts +1 -2
- package/package.json +11 -11
- package/dist/types/tests/DSControlledDateTimePicker.PUI-16014.test.d.ts +0 -1
- package/dist/types/tests/DSControlledDateTimePicker.PUI-17323.test.d.ts +0 -1
- package/dist/types/tests/DSControlledDateTimePicker.data-testid.test.d.ts +0 -1
- package/dist/types/tests/DSControlledDateTimePicker.exports.test.d.ts +0 -1
- package/dist/types/tests/custom-props/customProps.d.ts +0 -397
- package/dist/types/tests/custom-props/date-time-picker.date-custom-props.test.d.ts +0 -1
- package/dist/types/tests/custom-props/date-time-picker.date-time-custom-props.test.d.ts +0 -1
- package/dist/types/tests/custom-props/date-time-picker.time-custom-props.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.a11y.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.applyAriaDisabled.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.auto-advance.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.clear-button.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.keyboard-focus.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.keyboard.data-entry-typing.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.keyboard.fill-with-now.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.keyboard.regressive-backspace.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.keyboard.shortcut-clear.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.manual-delete-values.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.onChange-meta-info.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.readOnly.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.types-button.test.d.ts +0 -1
- package/dist/types/tests/date-time-picker.types-dom.test.d.ts +0 -1
- package/dist/types/tests/playwright-tests/full/ControlledTestRenderer.d.ts +0 -2
- package/dist/types/tests/playwright-tests/full/DSControlledDateTimePicker.full.navigation.test.playwright.d.ts +0 -1
- package/dist/types/typescript-testing/slot-arguments-engine.d.ts +0 -95
- package/dist/types/typescript-testing/slot-props.d.ts +0 -1
- package/dist/types/typescript-testing/typescript-date-time-picker-valid.d.ts +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/TimeInputs/MinutesInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledMinuteInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMinute = (minutes: string) => {\n if (minutes === '') return false;\n const numberOnly = regExpNumbers.test(minutes);\n return minutes.length > 2 || !numberOnly || Number.parseInt(minutes, 10) > 60;\n};\ninterface MinutesInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n contextRef: React.MutableRefObject<HTMLInputElement | null>;\n placeholder: string;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledMinuteInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMinute = (minutes: string) => {\n if (minutes === '') return false;\n const numberOnly = regExpNumbers.test(minutes);\n return minutes.length > 2 || !numberOnly || Number.parseInt(minutes, 10) > 60;\n};\ninterface MinutesInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n contextRef: React.MutableRefObject<HTMLInputElement | null>;\n placeholder: string;\n isFocused: boolean;\n getProps: ControlledDateTimePickerContextT['getProps'];\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n readOnly: boolean;\n}\nexport const MinutesInput = React.memo(\n ({\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n value,\n disabled,\n applyAriaDisabled,\n placeholder,\n contextRef,\n isFocused,\n getProps,\n tabIndex,\n readOnly,\n }: MinutesInputsPropsT): JSX.Element => {\n const validateOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly || applyAriaDisabled || disabled || isInvalidMinute(e?.target?.value)) {\n e.preventDefault();\n return;\n }\n onChange(e);\n },\n [applyAriaDisabled, disabled, onChange, readOnly],\n );\n const minutesNum = convertToPositiveNumberIfPossible(value);\n return (\n <StyledMinuteInput\n onChange={validateOnChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n value={value}\n innerRef={(DomElem: HTMLInputElement) => {\n contextRef.current = DomElem;\n if (isFocused) DomElem?.focus?.();\n }}\n tabIndex={tabIndex}\n data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE}\n placeholder={placeholder}\n aria-label=\"minutes\"\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n getOwnerProps={getProps}\n readOnly={readOnly}\n role=\"spinbutton\"\n aria-valuemin={0}\n aria-valuemax={59}\n // when empty, valuenow falls back to the min (not omitted) so VoiceOver honors\n // aria-valuetext=\"empty\" instead of announcing a computed position percentage\n aria-valuenow={minutesNum === -1 ? 0 : minutesNum}\n aria-valuetext={minutesNum === -1 ? 'empty' : minutesNum}\n />\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDjB;AAvDN,mBAAmC;AAEnC,uBAAmD;AAEnD,qBAAkC;AAClC,2BAAkD;AAClD,MAAM,gBAAgB;AACtB,MAAM,kBAAkB,CAAC,YAAoB;AAC3C,MAAI,YAAY,GAAI,QAAO;AAC3B,QAAM,aAAa,cAAc,KAAK,OAAO;AAC7C,SAAO,QAAQ,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,SAAS,EAAE,IAAI;AAC7E;AAgBO,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC;AAAA,IACC;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,MAAwC;AACtC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,YAAY,qBAAqB,YAAY,gBAAgB,GAAG,QAAQ,KAAK,GAAG;AAClF,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,mBAAmB,UAAU,UAAU,QAAQ;AAAA,IAClD;AACA,UAAM,iBAAa,wDAAkC,KAAK;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,YAA8B;AACvC,qBAAW,UAAU;AACrB,cAAI,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,eAAa,oDAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,cAAW;AAAA,QACX;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QAGf,iBAAe,eAAe,KAAK,IAAI;AAAA,QACvC,kBAAgB,eAAe,KAAK,UAAU;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -67,7 +67,6 @@ const TimeInputs = () => {
|
|
|
67
67
|
hourInputRef,
|
|
68
68
|
minutesInputRef,
|
|
69
69
|
meridiemInputRef,
|
|
70
|
-
ariaCurrentValueForInputs,
|
|
71
70
|
latestInteractionRegion,
|
|
72
71
|
currFocusDescriber,
|
|
73
72
|
getProps,
|
|
@@ -95,7 +94,6 @@ const TimeInputs = () => {
|
|
|
95
94
|
contextRef: hourInputRef,
|
|
96
95
|
tabIndex,
|
|
97
96
|
placeholder: "HH",
|
|
98
|
-
ariaCurrentValueForInputs,
|
|
99
97
|
autoFocusHourInput,
|
|
100
98
|
disabled,
|
|
101
99
|
"aria-disabled": applyAriaDisabled,
|
|
@@ -117,7 +115,6 @@ const TimeInputs = () => {
|
|
|
117
115
|
contextRef: minutesInputRef,
|
|
118
116
|
tabIndex,
|
|
119
117
|
placeholder: "MM",
|
|
120
|
-
ariaCurrentValueForInputs,
|
|
121
118
|
disabled,
|
|
122
119
|
"aria-disabled": applyAriaDisabled,
|
|
123
120
|
applyAriaDisabled,
|
|
@@ -138,7 +135,6 @@ const TimeInputs = () => {
|
|
|
138
135
|
contextRef: meridiemInputRef,
|
|
139
136
|
tabIndex,
|
|
140
137
|
placeholder: "AM",
|
|
141
|
-
ariaCurrentValueForInputs,
|
|
142
138
|
disabled,
|
|
143
139
|
"aria-disabled": applyAriaDisabled,
|
|
144
140
|
applyAriaDisabled,
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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\">:</StyledColonSeparator>\n <StyledFocusWithIn>\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> </StyledSeparator>\n <StyledFocusWithIn>\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,oCACC;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,eAAC;AAAA,QAC3C,4CAAC,oCACC;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,eAAC;AAAA,QAClB,4CAAC,oCACC;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
|
}
|
|
@@ -24,7 +24,6 @@ const DDInput = React2.memo(
|
|
|
24
24
|
contextRef,
|
|
25
25
|
tabIndex,
|
|
26
26
|
placeholder,
|
|
27
|
-
ariaCurrentValueForInputs,
|
|
28
27
|
isFocused,
|
|
29
28
|
getProps,
|
|
30
29
|
readOnly
|
|
@@ -54,7 +53,7 @@ const DDInput = React2.memo(
|
|
|
54
53
|
},
|
|
55
54
|
tabIndex,
|
|
56
55
|
placeholder,
|
|
57
|
-
"aria-label":
|
|
56
|
+
"aria-label": "day",
|
|
58
57
|
"data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
|
|
59
58
|
disabled,
|
|
60
59
|
"aria-disabled": applyAriaDisabled,
|
|
@@ -64,7 +63,7 @@ const DDInput = React2.memo(
|
|
|
64
63
|
role: "spinbutton",
|
|
65
64
|
"aria-valuemin": 1,
|
|
66
65
|
"aria-valuemax": 31,
|
|
67
|
-
"aria-valuenow": dayNum === -1 ?
|
|
66
|
+
"aria-valuenow": dayNum === -1 ? 1 : dayNum,
|
|
68
67
|
"aria-valuetext": dayNum === -1 ? "empty" : announcableCardinalDays[dayNum]
|
|
69
68
|
}
|
|
70
69
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DateInputs/DDInput.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledDateInput } from '../Styleds.js';\nimport { announcableCardinalDays } from '../../utils/constants.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidDay = (day: string) => {\n if (day === '') return false;\n const numberOnly = regExpNumbers.test(day);\n return day.length > 2 || day === '00' || !numberOnly || Number.parseInt(day, 10) > 31;\n};\n\ninterface DDInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n hasError: boolean;\n placeholder: string;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledDateInput } from '../Styleds.js';\nimport { announcableCardinalDays } from '../../utils/constants.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidDay = (day: string) => {\n if (day === '') return false;\n const numberOnly = regExpNumbers.test(day);\n return day.length > 2 || day === '00' || !numberOnly || Number.parseInt(day, 10) > 31;\n};\n\ninterface DDInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n hasError: boolean;\n placeholder: string;\n contextRef: React.MutableRefObject<HTMLInputElement | null>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n isFocused: boolean;\n getProps: ControlledDateTimePickerContextT['getProps'];\n readOnly: boolean;\n}\nexport const DDInput = React.memo(\n ({\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n value,\n disabled,\n applyAriaDisabled,\n hasError,\n contextRef,\n tabIndex,\n placeholder,\n isFocused,\n getProps,\n readOnly,\n }: DDInputsPropsT): JSX.Element => {\n const validateOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (isInvalidDay(e?.currentTarget?.value)) {\n e.preventDefault();\n return;\n }\n onChange(e);\n },\n [onChange],\n );\n const dayNum = convertToPositiveNumberIfPossible(value) as DSControlledDateTimePickerInternalsT.DateDay | -1;\n\n return (\n <StyledDateInput\n onChange={validateOnChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n value={value}\n innerRef={(DomElem: HTMLInputElement) => {\n (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n if (isFocused) DomElem?.focus?.();\n }}\n tabIndex={tabIndex}\n placeholder={placeholder}\n aria-label=\"day\"\n data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY}\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n aria-invalid={hasError}\n getOwnerProps={getProps}\n readOnly={readOnly}\n role=\"spinbutton\"\n aria-valuemin={1}\n aria-valuemax={31}\n // when empty, valuenow falls back to the min (not omitted) so VoiceOver honors\n // aria-valuetext=\"empty\" instead of announcing a computed position percentage\n aria-valuenow={dayNum === -1 ? 1 : dayNum}\n aria-valuetext={dayNum === -1 ? 'empty' : announcableCardinalDays[dayNum]}\n />\n );\n },\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8DjB;AA7DN,OAAOA,UAAS,mBAAmB;AAEnC,SAAS,0CAA0C;AAEnD,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AACxC,SAAS,yCAAyC;AAElD,MAAM,gBAAgB;AACtB,MAAM,eAAe,CAAC,QAAgB;AACpC,MAAI,QAAQ,GAAI,QAAO;AACvB,QAAM,aAAa,cAAc,KAAK,GAAG;AACzC,SAAO,IAAI,SAAS,KAAK,QAAQ,QAAQ,CAAC,cAAc,OAAO,SAAS,KAAK,EAAE,IAAI;AACrF;AAkBO,MAAM,UAAUA,OAAM;AAAA,EAC3B,CAAC;AAAA,IACC;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,MAAmC;AACjC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,aAAa,GAAG,eAAe,KAAK,GAAG;AACzC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,UAAM,SAAS,kCAAkC,KAAK;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,YAA8B;AACvC,UAAC,WAAwD,UAAU;AACnE,cAAI,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAW;AAAA,QACX,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QAGf,iBAAe,WAAW,KAAK,IAAI;AAAA,QACnC,kBAAgB,WAAW,KAAK,UAAU,wBAAwB,MAAM;AAAA;AAAA,IAC1E;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -35,7 +35,6 @@ const DateInputs = () => {
|
|
|
35
35
|
monthInputRef,
|
|
36
36
|
dayInputRef,
|
|
37
37
|
yearInputRef,
|
|
38
|
-
ariaCurrentValueForInputs,
|
|
39
38
|
latestInteractionRegion,
|
|
40
39
|
currFocusDescriber,
|
|
41
40
|
getProps,
|
|
@@ -65,7 +64,6 @@ const DateInputs = () => {
|
|
|
65
64
|
tabIndex,
|
|
66
65
|
autoFocusMonthInput,
|
|
67
66
|
placeholder: "MM",
|
|
68
|
-
ariaCurrentValueForInputs,
|
|
69
67
|
disabled,
|
|
70
68
|
applyAriaDisabled,
|
|
71
69
|
hasError,
|
|
@@ -86,7 +84,6 @@ const DateInputs = () => {
|
|
|
86
84
|
contextRef: dayInputRef,
|
|
87
85
|
tabIndex,
|
|
88
86
|
placeholder: "DD",
|
|
89
|
-
ariaCurrentValueForInputs,
|
|
90
87
|
disabled,
|
|
91
88
|
applyAriaDisabled,
|
|
92
89
|
hasError,
|
|
@@ -107,7 +104,6 @@ const DateInputs = () => {
|
|
|
107
104
|
contextRef: yearInputRef,
|
|
108
105
|
tabIndex,
|
|
109
106
|
placeholder: "YYYY",
|
|
110
|
-
ariaCurrentValueForInputs,
|
|
111
107
|
disabled,
|
|
112
108
|
applyAriaDisabled,
|
|
113
109
|
hasError,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DateInputs/DateInputs.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { MMInput } from './MMInput.js';\nimport { DDInput } from './DDInput.js';\nimport { YYYYInput } from './YYYYInput.js';\nimport { StyledFocusWithIn, StyledSeparator } from '../Styleds.js';\nimport { useDateInputs } from './useDateInputs.js';\nimport { fixedValues } from '../config.js';\n\nexport const DateInputs = (): JSX.Element => {\n const {\n month,\n day,\n year,\n autoFocusMonthInput,\n innerRefMonthInput,\n onMonthChange,\n onDayChange,\n onYearChange,\n onMonthBlur,\n onDayBlur,\n onYearBlur,\n onMonthFocus,\n onDayFocus,\n onYearFocus,\n onMonthKeyDown,\n onDayKeyDown,\n onYearKeyDown,\n disabled,\n applyAriaDisabled,\n } = useDateInputs();\n // we do this here so MMInput,DDInput,YYYYInput can be pure component memoized via React.memo\n const {\n monthInputRef,\n dayInputRef,\n yearInputRef,\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { MMInput } from './MMInput.js';\nimport { DDInput } from './DDInput.js';\nimport { YYYYInput } from './YYYYInput.js';\nimport { StyledFocusWithIn, StyledSeparator } from '../Styleds.js';\nimport { useDateInputs } from './useDateInputs.js';\nimport { fixedValues } from '../config.js';\n\nexport const DateInputs = (): JSX.Element => {\n const {\n month,\n day,\n year,\n autoFocusMonthInput,\n innerRefMonthInput,\n onMonthChange,\n onDayChange,\n onYearChange,\n onMonthBlur,\n onDayBlur,\n onYearBlur,\n onMonthFocus,\n onDayFocus,\n onYearFocus,\n onMonthKeyDown,\n onDayKeyDown,\n onYearKeyDown,\n disabled,\n applyAriaDisabled,\n } = useDateInputs();\n // we do this here so MMInput,DDInput,YYYYInput can be pure component memoized via React.memo\n const {\n monthInputRef,\n dayInputRef,\n yearInputRef,\n latestInteractionRegion,\n currFocusDescriber,\n getProps,\n props: { tabIndex, hasError, 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.largeInputWidth,\n ]}\n >\n <StyledFocusWithIn>\n <MMInput\n onChange={onMonthChange}\n onBlur={onMonthBlur}\n onFocus={onMonthFocus}\n onKeyDown={onMonthKeyDown}\n value={month}\n contextRef={monthInputRef}\n innerRef={innerRefMonthInput}\n tabIndex={tabIndex}\n autoFocusMonthInput={autoFocusMonthInput}\n placeholder=\"MM\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n hasError={hasError}\n isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'month-input'}\n getProps={getProps}\n readOnly={readOnly}\n />\n </StyledFocusWithIn>\n <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n <StyledFocusWithIn>\n <DDInput\n onChange={onDayChange}\n onBlur={onDayBlur}\n onFocus={onDayFocus}\n onKeyDown={onDayKeyDown}\n value={day}\n contextRef={dayInputRef}\n tabIndex={tabIndex}\n placeholder=\"DD\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n hasError={hasError}\n isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'day-input'}\n getProps={getProps}\n readOnly={readOnly}\n />\n </StyledFocusWithIn>\n <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n <StyledFocusWithIn>\n <YYYYInput\n onChange={onYearChange}\n onBlur={onYearBlur}\n onFocus={onYearFocus}\n onKeyDown={onYearKeyDown}\n value={year}\n contextRef={yearInputRef}\n tabIndex={tabIndex}\n placeholder=\"YYYY\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n hasError={hasError}\n isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'year-input'}\n getProps={getProps}\n readOnly={readOnly}\n />\n </StyledFocusWithIn>\n </Grid>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC4CnB,SAUI,KAVJ;AA5CJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,uCAAuC;AAChD,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB,uBAAuB;AACnD,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAErB,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,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc;AAElB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,UAAU,SAAS;AAAA,EACxC,IAAI,WAAW,+BAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,MAEA;AAAA,4BAAC,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA,QACA,oBAAC,mBAAgB,YAAW,UAAS,eAAC;AAAA,QACtC,oBAAC,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO;AAAA,YACP,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA,QACA,oBAAC,mBAAgB,YAAW,UAAS,eAAC;AAAA,QACtC,oBAAC,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO;AAAA,YACP,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;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
|
}
|
|
@@ -27,7 +27,6 @@ const MMInput = React2.memo(
|
|
|
27
27
|
innerRef,
|
|
28
28
|
tabIndex,
|
|
29
29
|
autoFocusMonthInput,
|
|
30
|
-
ariaCurrentValueForInputs,
|
|
31
30
|
isFocused,
|
|
32
31
|
getProps,
|
|
33
32
|
readOnly
|
|
@@ -68,7 +67,7 @@ const MMInput = React2.memo(
|
|
|
68
67
|
innerRef: currentRef,
|
|
69
68
|
tabIndex,
|
|
70
69
|
placeholder,
|
|
71
|
-
"aria-label":
|
|
70
|
+
"aria-label": "month",
|
|
72
71
|
"data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
|
|
73
72
|
disabled,
|
|
74
73
|
"aria-disabled": applyAriaDisabled,
|
|
@@ -78,7 +77,7 @@ const MMInput = React2.memo(
|
|
|
78
77
|
role: "spinbutton",
|
|
79
78
|
"aria-valuemin": 1,
|
|
80
79
|
"aria-valuemax": 12,
|
|
81
|
-
"aria-valuenow": monthNum === -1 ?
|
|
80
|
+
"aria-valuenow": monthNum === -1 ? 1 : monthNum,
|
|
82
81
|
"aria-valuetext": monthNum === -1 ? "empty" : monthNames[monthNum - 1]
|
|
83
82
|
}
|
|
84
83
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DateInputs/MMInput.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { setMultipleRefs } from '@elliemae/ds-system';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useMemo } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledMonthInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nimport { monthNames } from '../../utils/constants.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMonth = (month: string) => {\n if (month === '') return false;\n const numberOnly = regExpNumbers.test(month);\n return month.length > 2 || month === '00' || !numberOnly || Number.parseInt(month, 10) > 12;\n};\ninterface MMInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n autoFocusMonthInput: boolean;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n hasError: boolean;\n contextRef: React.MutableRefObject<HTMLInputElement | null>;\n placeholder: string;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { setMultipleRefs } from '@elliemae/ds-system';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useMemo } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledMonthInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nimport { monthNames } from '../../utils/constants.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMonth = (month: string) => {\n if (month === '') return false;\n const numberOnly = regExpNumbers.test(month);\n return month.length > 2 || month === '00' || !numberOnly || Number.parseInt(month, 10) > 12;\n};\ninterface MMInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n autoFocusMonthInput: boolean;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n hasError: boolean;\n contextRef: React.MutableRefObject<HTMLInputElement | null>;\n placeholder: string;\n isFocused: boolean;\n innerRef?:\n | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n getProps: ControlledDateTimePickerContextT['getProps'];\n readOnly: boolean;\n}\nexport const MMInput = React.memo(\n ({\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n value,\n disabled,\n applyAriaDisabled,\n hasError,\n placeholder,\n contextRef,\n innerRef,\n tabIndex,\n autoFocusMonthInput,\n isFocused,\n getProps,\n readOnly,\n }: MMInputsPropsT): JSX.Element => {\n const validateOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (isInvalidMonth(e?.target?.value)) {\n e.preventDefault();\n return;\n }\n onChange(e);\n },\n [onChange],\n );\n\n const handleRef = useCallback(\n (DomElem: HTMLInputElement) => {\n (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n if (isFocused) DomElem?.focus?.();\n },\n [contextRef, isFocused],\n );\n\n const currentRef = useMemo(() => {\n if (innerRef) {\n return setMultipleRefs([handleRef, innerRef]);\n }\n return handleRef;\n }, [handleRef, innerRef]);\n\n const monthNum = convertToPositiveNumberIfPossible(value);\n\n return (\n <StyledMonthInput\n autoFocus={autoFocusMonthInput}\n onChange={validateOnChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n value={value}\n innerRef={currentRef}\n tabIndex={tabIndex}\n placeholder={placeholder}\n aria-label=\"month\"\n data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH}\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n aria-invalid={hasError}\n getOwnerProps={getProps}\n readOnly={readOnly}\n role=\"spinbutton\"\n aria-valuemin={1}\n aria-valuemax={12}\n // when empty, valuenow falls back to the min (not omitted) so VoiceOver honors\n // aria-valuetext=\"empty\" instead of announcing a computed position percentage\n aria-valuenow={monthNum === -1 ? 1 : monthNum}\n aria-valuetext={monthNum === -1 ? 'empty' : monthNames[monthNum - 1]}\n />\n );\n },\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACoFjB;AApFN,SAAS,uBAAuB;AAEhC,OAAOA,UAAS,aAAa,eAAe;AAE5C,SAAS,0CAA0C;AAEnD,SAAS,wBAAwB;AACjC,SAAS,yCAAyC;AAClD,SAAS,kBAAkB;AAE3B,MAAM,gBAAgB;AACtB,MAAM,iBAAiB,CAAC,UAAkB;AACxC,MAAI,UAAU,GAAI,QAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAqBO,MAAM,UAAUA,OAAM;AAAA,EAC3B,CAAC;AAAA,IACC;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,IACA;AAAA,EACF,MAAmC;AACjC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,eAAe,GAAG,QAAQ,KAAK,GAAG;AACpC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,YAAY;AAAA,MAChB,CAAC,YAA8B;AAC7B,QAAC,WAAwD,UAAU;AACnE,YAAI,UAAW,UAAS,QAAQ;AAAA,MAClC;AAAA,MACA,CAAC,YAAY,SAAS;AAAA,IACxB;AAEA,UAAM,aAAa,QAAQ,MAAM;AAC/B,UAAI,UAAU;AACZ,eAAO,gBAAgB,CAAC,WAAW,QAAQ,CAAC;AAAA,MAC9C;AACA,aAAO;AAAA,IACT,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,UAAM,WAAW,kCAAkC,KAAK;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,cAAW;AAAA,QACX,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QAGf,iBAAe,aAAa,KAAK,IAAI;AAAA,QACrC,kBAAgB,aAAa,KAAK,UAAU,WAAW,WAAW,CAAC;AAAA;AAAA,IACrE;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -24,7 +24,6 @@ const YYYYInput = React2.memo(
|
|
|
24
24
|
placeholder,
|
|
25
25
|
contextRef,
|
|
26
26
|
tabIndex,
|
|
27
|
-
ariaCurrentValueForInputs,
|
|
28
27
|
isFocused,
|
|
29
28
|
getProps,
|
|
30
29
|
readOnly
|
|
@@ -55,7 +54,7 @@ const YYYYInput = React2.memo(
|
|
|
55
54
|
tabIndex,
|
|
56
55
|
"data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
|
|
57
56
|
placeholder,
|
|
58
|
-
"aria-label":
|
|
57
|
+
"aria-label": "year",
|
|
59
58
|
disabled,
|
|
60
59
|
"aria-disabled": applyAriaDisabled,
|
|
61
60
|
"aria-invalid": hasError,
|
|
@@ -64,7 +63,7 @@ const YYYYInput = React2.memo(
|
|
|
64
63
|
role: "spinbutton",
|
|
65
64
|
"aria-valuemin": 0,
|
|
66
65
|
"aria-valuemax": 9999,
|
|
67
|
-
"aria-valuenow": yearNum === -1 ?
|
|
66
|
+
"aria-valuenow": yearNum === -1 ? 0 : yearNum,
|
|
68
67
|
"aria-valuetext": yearNum === -1 ? "empty" : fillStringWithPlaceHolders(`${yearNum}`, 4, "0")
|
|
69
68
|
}
|
|
70
69
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DateInputs/YYYYInput.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledYearInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nimport { fillStringWithPlaceHolders } from '../../utils/stringHelpers.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidYear = (year: string) => {\n if (year === '') return false;\n const numberOnly = regExpNumbers.test(year);\n return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;\n};\n\ninterface YYYYInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n hasError: boolean;\n contextRef: React.MutableRefObject<HTMLInputElement | null>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n placeholder: string;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledYearInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nimport { fillStringWithPlaceHolders } from '../../utils/stringHelpers.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidYear = (year: string) => {\n if (year === '') return false;\n const numberOnly = regExpNumbers.test(year);\n return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;\n};\n\ninterface YYYYInputsPropsT {\n onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n value: string;\n disabled: boolean;\n applyAriaDisabled?: boolean;\n hasError: boolean;\n contextRef: React.MutableRefObject<HTMLInputElement | null>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n placeholder: string;\n isFocused: boolean;\n getProps: ControlledDateTimePickerContextT['getProps'];\n readOnly: boolean;\n}\nexport const YYYYInput = React.memo(\n ({\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n value,\n disabled,\n applyAriaDisabled,\n hasError,\n placeholder,\n contextRef,\n tabIndex,\n isFocused,\n getProps,\n readOnly,\n }: YYYYInputsPropsT): JSX.Element => {\n const validateOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n if (isInvalidYear(e?.currentTarget?.value)) {\n e.preventDefault();\n return;\n }\n onChange(e);\n },\n [onChange],\n );\n\n const yearNum = convertToPositiveNumberIfPossible(value);\n\n return (\n <StyledYearInput\n onChange={validateOnChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n value={value}\n innerRef={(DomElem: HTMLInputElement) => {\n (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n if (isFocused) DomElem?.focus?.();\n }}\n tabIndex={tabIndex}\n data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR}\n placeholder={placeholder}\n aria-label=\"year\"\n disabled={disabled}\n aria-disabled={applyAriaDisabled}\n aria-invalid={hasError}\n getOwnerProps={getProps}\n readOnly={readOnly}\n role=\"spinbutton\"\n aria-valuemin={0}\n aria-valuemax={9999}\n // when empty, valuenow falls back to the min (not omitted) so VoiceOver honors\n // aria-valuetext=\"empty\" instead of announcing a computed position percentage\n aria-valuenow={yearNum === -1 ? 0 : yearNum}\n aria-valuetext={yearNum === -1 ? 'empty' : fillStringWithPlaceHolders(`${yearNum}`, 4, '0')}\n />\n );\n },\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8DjB;AA7DN,OAAOA,UAAS,mBAAmB;AAEnC,SAAS,0CAA0C;AAEnD,SAAS,uBAAuB;AAChC,SAAS,yCAAyC;AAClD,SAAS,kCAAkC;AAC3C,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,SAAiB;AACtC,MAAI,SAAS,GAAI,QAAO;AACxB,QAAM,aAAa,cAAc,KAAK,IAAI;AAC1C,SAAO,KAAK,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,MAAM,EAAE,IAAI;AACvE;AAkBO,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;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,MAAqC;AACnC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,cAAc,GAAG,eAAe,KAAK,GAAG;AAC1C,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,UAAU,kCAAkC,KAAK;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,YAA8B;AACvC,UAAC,WAAwD,UAAU;AACnE,cAAI,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,cAAW;AAAA,QACX;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QAGf,iBAAe,YAAY,KAAK,IAAI;AAAA,QACpC,kBAAgB,YAAY,KAAK,UAAU,2BAA2B,GAAG,OAAO,IAAI,GAAG,GAAG;AAAA;AAAA,IAC5F;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
|
|
4
4
|
import { styled } from "@elliemae/ds-system";
|
|
5
5
|
import { useContext } from "react";
|
|
6
6
|
import {
|
|
@@ -11,23 +11,35 @@ import {
|
|
|
11
11
|
import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
|
|
12
12
|
import { CalendarContent } from "./CalendarContent.js";
|
|
13
13
|
import { CalendarContext } from "./CalendarContext.js";
|
|
14
|
-
const
|
|
14
|
+
const StyledFloatingWrapper = styled(FloatingWrapper, {
|
|
15
15
|
name: DSControlledDateTimePickerName,
|
|
16
16
|
slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR
|
|
17
17
|
})``;
|
|
18
18
|
const CalendarWrapper = () => {
|
|
19
19
|
const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);
|
|
20
20
|
const { referenceElement, closeCalendar } = useContext(CalendarContext);
|
|
21
|
+
const {
|
|
22
|
+
refs,
|
|
23
|
+
floatingStyles,
|
|
24
|
+
context,
|
|
25
|
+
isOpen: isFloatingOpen
|
|
26
|
+
} = useFloatingContext({
|
|
27
|
+
externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
|
|
28
|
+
externalReferenceElement: referenceElement,
|
|
29
|
+
withoutAnimation: true,
|
|
30
|
+
customOffset: [0, 0],
|
|
31
|
+
onClickOutside: isControllerOnly ? void 0 : closeCalendar
|
|
32
|
+
});
|
|
21
33
|
if (isControllerOnly) return /* @__PURE__ */ jsx(CalendarContent, {});
|
|
22
34
|
if (!referenceElement) return null;
|
|
23
35
|
return /* @__PURE__ */ jsx(
|
|
24
|
-
|
|
36
|
+
StyledFloatingWrapper,
|
|
25
37
|
{
|
|
26
|
-
|
|
38
|
+
innerRef: refs.setFloating,
|
|
39
|
+
isOpen: isFloatingOpen,
|
|
40
|
+
floatingStyles,
|
|
41
|
+
context,
|
|
27
42
|
"data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR,
|
|
28
|
-
referenceElement,
|
|
29
|
-
withoutArrow: true,
|
|
30
|
-
onClickOutside: closeCalendar,
|
|
31
43
|
getOwnerProps: getProps,
|
|
32
44
|
"aria-label": "calendar header",
|
|
33
45
|
role: "dialog",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarWrapper.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContent } from './CalendarContent.js';\nimport { CalendarContext } from './CalendarContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR,\n})``;\n\nexport const CalendarWrapper = (): JSX.Element | null => {\n const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);\n const { referenceElement, closeCalendar } = useContext(CalendarContext);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n externalReferenceElement: referenceElement,\n withoutAnimation: true,\n customOffset: [0, 0],\n onClickOutside: isControllerOnly ? undefined : closeCalendar,\n });\n\n if (isControllerOnly) return <CalendarContent />;\n if (!referenceElement) return null;\n\n return (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n getOwnerProps={getProps}\n aria-label=\"calendar header\"\n role=\"dialog\"\n >\n <CalendarContent />\n </StyledFloatingWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkCQ;AAlC/B,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,cAAc;AACvB,SAAgB,kBAAkB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uCAAuC;AAChD,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAEhC,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,kBAAkB,MAA0B;AACvD,QAAM,EAAE,kBAAkB,SAAS,IAAI,WAAW,+BAA+B;AACjF,QAAM,EAAE,kBAAkB,cAAc,IAAI,WAAW,eAAe;AAEtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI,mBAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,oBAAC,mBAAgB;AAC9C,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,mCAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,mBAAgB;AAAA;AAAA,EACnB;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { DSPopperJS } from "@elliemae/ds-popperjs";
|
|
4
|
-
import { styled } from "@elliemae/ds-system";
|
|
5
3
|
import { useContext } from "react";
|
|
4
|
+
import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
|
|
5
|
+
import { styled } from "@elliemae/ds-system";
|
|
6
6
|
import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
|
|
7
7
|
import {
|
|
8
8
|
ControlledDateTimePickerDatatestid,
|
|
@@ -11,23 +11,35 @@ import {
|
|
|
11
11
|
} from "../../../constants/index.js";
|
|
12
12
|
import { CalendarWithTimeWheelContent } from "./CalendarWithTimeWheelContent.js";
|
|
13
13
|
import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext.js";
|
|
14
|
-
const
|
|
14
|
+
const StyledFloatingWrapper = styled(FloatingWrapper, {
|
|
15
15
|
name: DSControlledDateTimePickerName,
|
|
16
16
|
slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL
|
|
17
17
|
})``;
|
|
18
18
|
const CalendarWithTimeWheelWrapper = () => {
|
|
19
19
|
const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);
|
|
20
20
|
const { getProps } = useContext(ControlledDateTimePickerContext);
|
|
21
|
+
const {
|
|
22
|
+
refs,
|
|
23
|
+
floatingStyles,
|
|
24
|
+
context,
|
|
25
|
+
isOpen: isFloatingOpen
|
|
26
|
+
} = useFloatingContext({
|
|
27
|
+
externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
|
|
28
|
+
externalReferenceElement: referenceElement,
|
|
29
|
+
withoutAnimation: true,
|
|
30
|
+
customOffset: [0, 0],
|
|
31
|
+
onClickOutside: isControllerOnly ? void 0 : closeCalendar
|
|
32
|
+
});
|
|
21
33
|
if (isControllerOnly) return /* @__PURE__ */ jsx(CalendarWithTimeWheelContent, {});
|
|
22
34
|
if (!referenceElement) return null;
|
|
23
35
|
return /* @__PURE__ */ jsx(
|
|
24
|
-
|
|
36
|
+
StyledFloatingWrapper,
|
|
25
37
|
{
|
|
26
|
-
|
|
38
|
+
innerRef: refs.setFloating,
|
|
39
|
+
isOpen: isFloatingOpen,
|
|
40
|
+
floatingStyles,
|
|
41
|
+
context,
|
|
27
42
|
"data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,
|
|
28
|
-
referenceElement,
|
|
29
|
-
withoutArrow: true,
|
|
30
|
-
onClickOutside: closeCalendar,
|
|
31
43
|
getOwnerProps: getProps,
|
|
32
44
|
"aria-label": "calendar header",
|
|
33
45
|
role: "dialog",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,\n})``;\n\nexport const CalendarWithTimeWheelWrapper = () => {\n const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n const { getProps } = useContext(ControlledDateTimePickerContext);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n externalReferenceElement: referenceElement,\n withoutAnimation: true,\n customOffset: [0, 0],\n onClickOutside: isControllerOnly ? undefined : closeCalendar,\n });\n\n if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n if (!referenceElement) return null;\n\n return (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n getOwnerProps={getProps}\n aria-label=\"calendar header\"\n role=\"dialog\"\n >\n <CalendarWithTimeWheelContent />\n </StyledFloatingWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkCQ;AAlC/B,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,cAAc;AACvB,SAAS,uCAAuC;AAChD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAE7C,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,IAAI,WAAW,4BAA4B;AACrG,QAAM,EAAE,SAAS,IAAI,WAAW,+BAA+B;AAE/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI,mBAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,oBAAC,gCAA6B;AAC3D,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,mCAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,gCAA6B;AAAA;AAAA,EAChC;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
|
|
4
4
|
import { styled } from "@elliemae/ds-system";
|
|
5
5
|
import React2 from "react";
|
|
6
6
|
import {
|
|
@@ -11,23 +11,35 @@ import {
|
|
|
11
11
|
import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
|
|
12
12
|
import { TimeWheelContent } from "./TimeWheelContent.js";
|
|
13
13
|
import { TimeWheelContext } from "./TimeWheelContext.js";
|
|
14
|
-
const
|
|
14
|
+
const StyledFloatingWrapper = styled(FloatingWrapper, {
|
|
15
15
|
name: DSControlledDateTimePickerName,
|
|
16
16
|
slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL
|
|
17
17
|
})``;
|
|
18
18
|
const TimeWheelWrapper = () => {
|
|
19
19
|
const { referenceElement, closeTimePicker } = React2.useContext(TimeWheelContext);
|
|
20
20
|
const { isControllerOnly, getProps } = React2.useContext(ControlledDateTimePickerContext);
|
|
21
|
+
const {
|
|
22
|
+
refs,
|
|
23
|
+
floatingStyles,
|
|
24
|
+
context,
|
|
25
|
+
isOpen: isFloatingOpen
|
|
26
|
+
} = useFloatingContext({
|
|
27
|
+
externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
|
|
28
|
+
externalReferenceElement: referenceElement,
|
|
29
|
+
withoutAnimation: true,
|
|
30
|
+
customOffset: [0, 0],
|
|
31
|
+
onClickOutside: isControllerOnly ? void 0 : closeTimePicker
|
|
32
|
+
});
|
|
21
33
|
if (isControllerOnly) return /* @__PURE__ */ jsx(TimeWheelContent, {});
|
|
22
34
|
if (!referenceElement) return null;
|
|
23
35
|
return /* @__PURE__ */ jsx(
|
|
24
|
-
|
|
36
|
+
StyledFloatingWrapper,
|
|
25
37
|
{
|
|
26
|
-
|
|
38
|
+
innerRef: refs.setFloating,
|
|
39
|
+
isOpen: isFloatingOpen,
|
|
40
|
+
floatingStyles,
|
|
41
|
+
context,
|
|
27
42
|
"data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL,
|
|
28
|
-
referenceElement,
|
|
29
|
-
withoutArrow: true,
|
|
30
|
-
onClickOutside: closeTimePicker,
|
|
31
43
|
getOwnerProps: getProps,
|
|
32
44
|
"aria-label": "time wheel header",
|
|
33
45
|
role: "dialog",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/TimeWheelWrapper.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { TimeWheelContent } from './TimeWheelContent.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL,\n})``;\n\nexport const TimeWheelWrapper = () => {\n const { referenceElement, closeTimePicker } = React.useContext(TimeWheelContext);\n const { isControllerOnly, getProps } = React.useContext(ControlledDateTimePickerContext);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n externalReferenceElement: referenceElement,\n withoutAnimation: true,\n customOffset: [0, 0],\n onClickOutside: isControllerOnly ? undefined : closeTimePicker,\n });\n\n if (isControllerOnly) return <TimeWheelContent />;\n if (!referenceElement) return null;\n\n return (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n getOwnerProps={getProps}\n aria-label=\"time wheel header\"\n role=\"dialog\"\n >\n <TimeWheelContent />\n </StyledFloatingWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkCQ;AAlC/B,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,cAAc;AACvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uCAAuC;AAChD,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAEjC,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,kBAAkB,gBAAgB,IAAIA,OAAM,WAAW,gBAAgB;AAC/E,QAAM,EAAE,kBAAkB,SAAS,IAAIA,OAAM,WAAW,+BAA+B;AAEvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI,mBAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,oBAAC,oBAAiB;AAC/C,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,mCAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,oBAAiB;AAAA;AAAA,EACpB;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -20,7 +20,6 @@ const HHInput = React2.memo(
|
|
|
20
20
|
disabled,
|
|
21
21
|
applyAriaDisabled,
|
|
22
22
|
placeholder,
|
|
23
|
-
ariaCurrentValueForInputs,
|
|
24
23
|
contextRef,
|
|
25
24
|
autoFocusHourInput,
|
|
26
25
|
isFocused,
|
|
@@ -55,7 +54,7 @@ const HHInput = React2.memo(
|
|
|
55
54
|
tabIndex,
|
|
56
55
|
placeholder,
|
|
57
56
|
"data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
|
|
58
|
-
"aria-label":
|
|
57
|
+
"aria-label": "hours",
|
|
59
58
|
disabled,
|
|
60
59
|
"aria-disabled": applyAriaDisabled,
|
|
61
60
|
getOwnerProps: getProps,
|
|
@@ -63,7 +62,7 @@ const HHInput = React2.memo(
|
|
|
63
62
|
role: "spinbutton",
|
|
64
63
|
"aria-valuemin": 1,
|
|
65
64
|
"aria-valuemax": 12,
|
|
66
|
-
"aria-valuenow": hoursNum === -1 ?
|
|
65
|
+
"aria-valuenow": hoursNum === -1 ? 1 : hoursNum,
|
|
67
66
|
"aria-valuetext": hoursNum === -1 ? "empty" : hoursNum
|
|
68
67
|
}
|
|
69
68
|
);
|