@elliemae/ds-controlled-form 2.0.0-next.1 → 2.0.0-next.6
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/cjs/controlled-checkbox/config/useValidateProps.js +3 -5
- package/cjs/controlled-checkbox/styles.js +2 -2
- package/cjs/controlled-checkbox/utils/styleHelpers.js +2 -20
- package/cjs/controlled-date-range-picker/config/useRangePickerLogic.js +1 -0
- package/cjs/controlled-date-range-picker/parts/ControlledDateRangeCalendar.js +1 -0
- package/cjs/controlled-date-range-picker/parts/ControlledDateRangeFromDate.js +1 -0
- package/cjs/controlled-date-range-picker/parts/ControlledDateRangeToDate.js +1 -0
- package/cjs/controlled-date-time-picker/config/useControlledDateTimePicker.js +7 -5
- package/cjs/controlled-date-time-picker/config/useGetDestructuredValues.js +6 -6
- package/cjs/controlled-date-time-picker/config/useValidateProps.js +10 -41
- package/cjs/controlled-date-time-picker/parts/DateInputs/DDInput.js +1 -1
- package/cjs/controlled-date-time-picker/parts/DateInputs/MMInput.js +1 -1
- package/cjs/controlled-date-time-picker/parts/DateInputs/YYYYInput.js +1 -1
- package/cjs/controlled-date-time-picker/parts/DateInputs/useDateInputs.js +3 -3
- package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarDaysList.js +4 -4
- package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarHead.js +2 -2
- package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js +1 -1
- package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/Day.js +6 -6
- package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/Styleds.js +2 -6
- package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/useConfigCalendarCTX.js +1 -2
- package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js +1 -1
- package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/useFocusLogic.js +1 -2
- package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/usePopperTriggerLogic.js +1 -1
- package/cjs/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js +1 -1
- package/cjs/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js +1 -1
- package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/HoursList.js +4 -4
- package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js +5 -5
- package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/MinutesList.js +4 -4
- package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/SecondsList.js +2 -2
- package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/Styleds.js +3 -62
- package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelContent.js +1 -1
- package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js +1 -1
- package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/useCurrentDisplayedWheelsLogic.js +3 -3
- package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/usePopperTriggerLogic.js +1 -0
- package/cjs/controlled-date-time-picker/parts/Styleds.js +2 -7
- package/cjs/controlled-date-time-picker/parts/TimeInputs/HHInput.js +1 -1
- package/cjs/controlled-date-time-picker/parts/TimeInputs/MeridiemInput.js +2 -1
- package/cjs/controlled-date-time-picker/parts/TimeInputs/MinutesInput.js +1 -1
- package/cjs/controlled-date-time-picker/parts/TimeInputs/useTimeInputs.js +4 -4
- package/cjs/controlled-date-time-picker/utils/dateHelpers.js +5 -5
- package/cjs/controlled-date-time-picker/utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js +1 -1
- package/cjs/controlled-date-time-picker/utils/stringHelpers.js +5 -4
- package/cjs/controlled-toggle/ControlledToggle.js +2 -1
- package/cjs/controlled-toggle/styles.js +5 -7
- package/esm/controlled-checkbox/config/useValidateProps.js +3 -5
- package/esm/controlled-checkbox/styles.js +2 -2
- package/esm/controlled-checkbox/utils/styleHelpers.js +2 -20
- package/esm/controlled-date-range-picker/config/useRangePickerLogic.js +1 -0
- package/esm/controlled-date-range-picker/parts/ControlledDateRangeCalendar.js +1 -0
- package/esm/controlled-date-range-picker/parts/ControlledDateRangeFromDate.js +1 -0
- package/esm/controlled-date-range-picker/parts/ControlledDateRangeToDate.js +1 -0
- package/esm/controlled-date-time-picker/config/useControlledDateTimePicker.js +7 -5
- package/esm/controlled-date-time-picker/config/useGetDestructuredValues.js +6 -6
- package/esm/controlled-date-time-picker/config/useValidateProps.js +10 -41
- package/esm/controlled-date-time-picker/parts/DateInputs/DDInput.js +1 -1
- package/esm/controlled-date-time-picker/parts/DateInputs/MMInput.js +1 -1
- package/esm/controlled-date-time-picker/parts/DateInputs/YYYYInput.js +1 -1
- package/esm/controlled-date-time-picker/parts/DateInputs/useDateInputs.js +3 -3
- package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarDaysList.js +4 -4
- package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarHead.js +2 -2
- package/esm/controlled-date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js +1 -1
- package/esm/controlled-date-time-picker/parts/Pickers/Calendar/Day.js +6 -6
- package/esm/controlled-date-time-picker/parts/Pickers/Calendar/Styleds.js +2 -6
- package/esm/controlled-date-time-picker/parts/Pickers/Calendar/useConfigCalendarCTX.js +1 -2
- package/esm/controlled-date-time-picker/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js +1 -1
- package/esm/controlled-date-time-picker/parts/Pickers/Calendar/useFocusLogic.js +1 -2
- package/esm/controlled-date-time-picker/parts/Pickers/Calendar/usePopperTriggerLogic.js +1 -1
- package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js +1 -1
- package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js +1 -1
- package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/HoursList.js +4 -4
- package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js +5 -5
- package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/MinutesList.js +4 -4
- package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/SecondsList.js +2 -2
- package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/Styleds.js +3 -62
- package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelContent.js +1 -1
- package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js +1 -1
- package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/useCurrentDisplayedWheelsLogic.js +3 -3
- package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/usePopperTriggerLogic.js +1 -0
- package/esm/controlled-date-time-picker/parts/Styleds.js +2 -7
- package/esm/controlled-date-time-picker/parts/TimeInputs/HHInput.js +1 -1
- package/esm/controlled-date-time-picker/parts/TimeInputs/MeridiemInput.js +2 -1
- package/esm/controlled-date-time-picker/parts/TimeInputs/MinutesInput.js +1 -1
- package/esm/controlled-date-time-picker/parts/TimeInputs/useTimeInputs.js +4 -4
- package/esm/controlled-date-time-picker/utils/dateHelpers.js +5 -5
- package/esm/controlled-date-time-picker/utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js +1 -1
- package/esm/controlled-date-time-picker/utils/stringHelpers.js +5 -4
- package/esm/controlled-toggle/ControlledToggle.js +2 -1
- package/esm/controlled-toggle/styles.js +5 -7
- package/package.json +4 -4
- package/cjs/package.json +0 -7
- package/esm/package.json +0 -7
|
@@ -5,20 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var dsPropsHelpers = require('@elliemae/ds-props-helpers');
|
|
6
6
|
|
|
7
7
|
const throwError = message => {
|
|
8
|
-
throw new Error(
|
|
9
|
-
`);
|
|
8
|
+
throw new Error("DSControlledCheckbox:: ".concat(message, "\n "));
|
|
10
9
|
};
|
|
11
10
|
|
|
12
11
|
const useValidateProps = (props, schema) => {
|
|
13
12
|
dsPropsHelpers.useValidateTypescriptPropTypes(props, schema);
|
|
14
13
|
|
|
15
14
|
if (typeof props.label === 'undefined' && typeof props.ariaLabel === 'undefined') {
|
|
16
|
-
throwError(
|
|
15
|
+
throwError("Please provide a label or ariaLabel property to use this component.");
|
|
17
16
|
}
|
|
18
17
|
|
|
19
18
|
if (props.checked === 'mixed' && typeof props.ariaControls === 'undefined') {
|
|
20
|
-
throwError(
|
|
21
|
-
This property must be a string containing all the ids that this mixed checkbox is controlling.`);
|
|
19
|
+
throwError("Please provide an ariaControls property to use a checkbox mixed state. \n This property must be a string containing all the ids that this mixed checkbox is controlling.");
|
|
22
20
|
}
|
|
23
21
|
};
|
|
24
22
|
|
|
@@ -36,7 +36,7 @@ const StyledCheckBox = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
|
36
36
|
theme,
|
|
37
37
|
hasError,
|
|
38
38
|
disabled
|
|
39
|
-
}) => !disabled && !hasError ?
|
|
39
|
+
}) => !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[600], " ") : undefined, ({
|
|
40
40
|
theme,
|
|
41
41
|
checked,
|
|
42
42
|
disabled,
|
|
@@ -51,7 +51,7 @@ const StyledCheckBox = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
|
51
51
|
hasError,
|
|
52
52
|
disabled,
|
|
53
53
|
readOnly
|
|
54
|
-
}) => !hasError && !disabled && !readOnly ?
|
|
54
|
+
}) => !hasError && !disabled && !readOnly ? " border: 1px solid ".concat(theme.colors.brand[600]) : undefined);
|
|
55
55
|
const StyledInput = /*#__PURE__*/styled__default["default"].input.withConfig({
|
|
56
56
|
componentId: "sc-349ih4-2"
|
|
57
57
|
})(["&:hover{cursor:pointer;}height:100%;position:absolute;top:0;left:0;opacity:0;"]);
|
|
@@ -22,29 +22,11 @@ const handleCheckMarkColor = ({
|
|
|
22
22
|
};
|
|
23
23
|
const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false) => {
|
|
24
24
|
if (checked === 'mixed') {
|
|
25
|
-
return
|
|
26
|
-
position: absolute;
|
|
27
|
-
content: '';
|
|
28
|
-
top: 6px;
|
|
29
|
-
left: 3px;
|
|
30
|
-
background: ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
|
|
31
|
-
width: ${theme.space.xxs};
|
|
32
|
-
height: 2px;
|
|
33
|
-
}`;
|
|
25
|
+
return "&:before {\n position: absolute;\n content: '';\n top: 6px;\n left: 3px;\n background: ".concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n width: ").concat(theme.space.xxs, ";\n height: 2px;\n }");
|
|
34
26
|
}
|
|
35
27
|
|
|
36
28
|
if (checked) {
|
|
37
|
-
return
|
|
38
|
-
position: absolute;
|
|
39
|
-
content: '';
|
|
40
|
-
top: 3px;
|
|
41
|
-
left: 2px;
|
|
42
|
-
border-left: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
|
|
43
|
-
border-bottom: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
|
|
44
|
-
height: 5px;
|
|
45
|
-
width: 10px;
|
|
46
|
-
transform: rotate(-45deg);
|
|
47
|
-
}`;
|
|
29
|
+
return "&:before {\n position: absolute;\n content: '';\n top: 3px;\n left: 2px;\n border-left: 2px solid ".concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n border-bottom: 2px solid ").concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n height: 5px;\n width: 10px;\n transform: rotate(-45deg);\n }");
|
|
48
30
|
}
|
|
49
31
|
|
|
50
32
|
return undefined;
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
7
|
var React = require('react');
|
|
7
8
|
require('../../controlled-date-time-picker/ControlledDateTimePicker.js');
|
|
8
9
|
require('core-js/modules/es.string.replace.js');
|
|
@@ -6,6 +6,7 @@ var _jsx = require('@babel/runtime/helpers/jsx');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var ControlledDateTimePicker = require('../../controlled-date-time-picker/ControlledDateTimePicker.js');
|
|
8
8
|
var ControlledDateTimePickerTypes = require('../../controlled-date-time-picker/ControlledDateTimePickerTypes.js');
|
|
9
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
9
10
|
require('core-js/modules/es.string.replace.js');
|
|
10
11
|
require('@babel/runtime/helpers/defineProperty');
|
|
11
12
|
var ControlledDateRangePickerCTX = require('../ControlledDateRangePickerCTX.js');
|
|
@@ -7,6 +7,7 @@ var React = require('react');
|
|
|
7
7
|
var ControlledDateRangePickerCTX = require('../ControlledDateRangePickerCTX.js');
|
|
8
8
|
var ControlledDateTimePicker = require('../../controlled-date-time-picker/ControlledDateTimePicker.js');
|
|
9
9
|
var ControlledDateTimePickerTypes = require('../../controlled-date-time-picker/ControlledDateTimePickerTypes.js');
|
|
10
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
10
11
|
require('core-js/modules/es.string.replace.js');
|
|
11
12
|
require('@babel/runtime/helpers/defineProperty');
|
|
12
13
|
|
|
@@ -7,6 +7,7 @@ var React = require('react');
|
|
|
7
7
|
var ControlledDateRangePickerCTX = require('../ControlledDateRangePickerCTX.js');
|
|
8
8
|
var ControlledDateTimePicker = require('../../controlled-date-time-picker/ControlledDateTimePicker.js');
|
|
9
9
|
var ControlledDateTimePickerTypes = require('../../controlled-date-time-picker/ControlledDateTimePickerTypes.js');
|
|
10
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
10
11
|
require('core-js/modules/es.string.replace.js');
|
|
11
12
|
require('@babel/runtime/helpers/defineProperty');
|
|
12
13
|
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
7
|
var React = require('react');
|
|
7
8
|
var useGetPropsWithDefault = require('./useGetPropsWithDefault.js');
|
|
8
9
|
var useGetDestructuredValues = require('./useGetDestructuredValues.js');
|
|
@@ -94,7 +95,8 @@ const useControlledDateTimePicker = props => {
|
|
|
94
95
|
const isWithCalendarToo = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
|
|
95
96
|
const withAnyInputs = !hideDate || !hideTime;
|
|
96
97
|
const withAnyPicker = !hideDateTimePicker || !hideTimePicker || !hideDatePicker;
|
|
97
|
-
const withClearBtn = isClearable && withAnyInputs && (dateStringFromProps !== '__/__/____' && dateStringFromProps !== '' ||
|
|
98
|
+
const withClearBtn = isClearable && withAnyInputs && (dateStringFromProps !== '__/__/____' && dateStringFromProps !== '' || // date is not "empty-ish"
|
|
99
|
+
timeStringFromProps !== '__:__ __' && timeStringFromProps !== ''); // or time is not "empty-ish"
|
|
98
100
|
|
|
99
101
|
const isWithDateInputs = withAnyInputs && (isDateTimeSelector || isDateSelector);
|
|
100
102
|
const isWithDateInputsOnly = withAnyInputs && isDateSelector;
|
|
@@ -133,7 +135,7 @@ const useControlledDateTimePicker = props => {
|
|
|
133
135
|
dateTime: appDateTime,
|
|
134
136
|
isDateTimeSelector
|
|
135
137
|
});
|
|
136
|
-
const ariaCurrentValueForInputs =
|
|
138
|
+
const ariaCurrentValueForInputs = "current values: ".concat(isWithDateInputs ? "".concat(announcedDateValues) : '').concat(isDateTimeSelector ? ', ' : '').concat(isWithTimeInputs ? "".concat(announcedTimeValues) : '');
|
|
137
139
|
const getDateMetaInfo = React.useCallback((newDateString = null, metaInfo = {}) => {
|
|
138
140
|
const finalDateString = newDateString || tempDateString;
|
|
139
141
|
return _objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(finalDateString, getIsOutOfRangeDay, getIsDisabledDay));
|
|
@@ -151,7 +153,7 @@ const useControlledDateTimePicker = props => {
|
|
|
151
153
|
appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
|
|
152
154
|
|
|
153
155
|
setTimeString(newTimeString);
|
|
154
|
-
const newDateTimeString =
|
|
156
|
+
const newDateTimeString = "".concat(newDateString, " ").concat(newTimeString);
|
|
155
157
|
|
|
156
158
|
const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
|
|
157
159
|
newDateString,
|
|
@@ -168,7 +170,7 @@ const useControlledDateTimePicker = props => {
|
|
|
168
170
|
appOnDateChange(appDateString, metaInfo); // don't do this on useEffect to avoid complete chaos
|
|
169
171
|
|
|
170
172
|
setTempDateString(newDateString);
|
|
171
|
-
const newDateTimeString =
|
|
173
|
+
const newDateTimeString = "".concat(newDateString, " ").concat(tempTimeString);
|
|
172
174
|
|
|
173
175
|
const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(tempTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
|
|
174
176
|
newDateString,
|
|
@@ -184,7 +186,7 @@ const useControlledDateTimePicker = props => {
|
|
|
184
186
|
appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
|
|
185
187
|
|
|
186
188
|
setTimeString(newTimeString);
|
|
187
|
-
const newDateTimeString =
|
|
189
|
+
const newDateTimeString = "".concat(tempDateString, " ").concat(newTimeString);
|
|
188
190
|
|
|
189
191
|
const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(tempDateString, metaInfo)), {}, {
|
|
190
192
|
newDateTimeString,
|
|
@@ -29,8 +29,8 @@ const useGetDestructuredDateValues = ({
|
|
|
29
29
|
const yearNum = numberHelpers.convertToPositiveNumberIfPossible(year);
|
|
30
30
|
const announcedMonth = monthNum !== -1 ? constants.monthNames[monthNum - 1] : 'empty month';
|
|
31
31
|
const announcedDay = dayNum !== -1 ? constants.announcableCardinalDays[dayNum] : 'empty day';
|
|
32
|
-
const announcedYear = yearNum !== -1 ? stringHelpers.fillStringWithPlaceHolders(
|
|
33
|
-
const announcedDateValues =
|
|
32
|
+
const announcedYear = yearNum !== -1 ? stringHelpers.fillStringWithPlaceHolders("".concat(yearNum), 4, '0') : 'empty year';
|
|
33
|
+
const announcedDateValues = "".concat(announcedMonth, ", ").concat(announcedDay, ", ").concat(announcedYear);
|
|
34
34
|
return React.useMemo(() => ({
|
|
35
35
|
month,
|
|
36
36
|
day,
|
|
@@ -63,12 +63,12 @@ const useGetDestructuredTimeValues = ({
|
|
|
63
63
|
const hoursNum = numberHelpers.convertToPositiveNumberIfPossible(hours);
|
|
64
64
|
const minutesNum = numberHelpers.convertToPositiveNumberIfPossible(minutes); // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
|
|
65
65
|
|
|
66
|
-
const announcedHours = hoursNum !== -1 ?
|
|
66
|
+
const announcedHours = hoursNum !== -1 ? "".concat(hoursNum) : 'empty hours'; // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
|
|
67
67
|
|
|
68
|
-
const announcedMinutes = minutesNum !== -1 ?
|
|
68
|
+
const announcedMinutes = minutesNum !== -1 ? "".concat(minutesNum) : 'empty minutes';
|
|
69
69
|
const announcedMeridiem = // eslint-disable-next-line no-nested-ternary
|
|
70
|
-
meridiem === 'PM' ?
|
|
71
|
-
const announcedTimeValues =
|
|
70
|
+
meridiem === 'PM' ? "post meridiem" : meridiem === 'AM' ? 'ante meridiem' : 'empty meriediem';
|
|
71
|
+
const announcedTimeValues = "".concat(announcedHours, ", ").concat(announcedMinutes, ", ").concat(announcedMeridiem);
|
|
72
72
|
return React.useMemo(() => ({
|
|
73
73
|
hours,
|
|
74
74
|
minutes,
|
|
@@ -7,72 +7,41 @@ var stringHelpers = require('../utils/stringHelpers.js');
|
|
|
7
7
|
var numberHelpers = require('../utils/numberHelpers.js');
|
|
8
8
|
|
|
9
9
|
/* eslint-disable max-len */
|
|
10
|
-
const PREPEND =
|
|
11
|
-
Invalid configuration detected::
|
|
12
|
-
|
|
13
|
-
`;
|
|
10
|
+
const PREPEND = "ControlledDateTimePicker:\n Invalid configuration detected::\n \n ";
|
|
14
11
|
const NOT_A_DEFECT = ''; // '\n\n\t\tThis is not a defect, please check\n\n\t\thttps://qa.dimsum.rd.elliemae.io/?path=/story/components-desktop-components-d-controlledform-date-time-picker--basic\n\n\t\tfor instructions on how to use the component correctly\n\n';
|
|
15
12
|
|
|
16
|
-
const INLINE_RECEIVED_PREPEND =
|
|
17
|
-
|
|
18
|
-
Received:`;
|
|
13
|
+
const INLINE_RECEIVED_PREPEND = "\n\n Received:";
|
|
19
14
|
|
|
20
15
|
const throwInvalidDateTimeError = invalidValue => {
|
|
21
|
-
throw new Error(
|
|
16
|
+
throw new Error("".concat(PREPEND, "the \"dateTime\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
|
|
22
17
|
};
|
|
23
18
|
|
|
24
19
|
const throwInvalidDaterror = invalidValue => {
|
|
25
|
-
throw new Error(
|
|
20
|
+
throw new Error("".concat(PREPEND, "the \"date\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
|
|
26
21
|
};
|
|
27
22
|
|
|
28
23
|
const throwInvalidTimerror = invalidValue => {
|
|
29
|
-
throw new Error(
|
|
24
|
+
throw new Error("".concat(PREPEND, "the \"time\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
|
|
30
25
|
};
|
|
31
26
|
|
|
32
27
|
const throwUncontrolledDateError = (date, onDateChange) => {
|
|
33
|
-
throw new Error(
|
|
34
|
-
the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
|
|
35
|
-
|
|
36
|
-
Received:
|
|
37
|
-
${date}(${typeof date})
|
|
38
|
-
${onDateChange}(${typeof onDateChange})
|
|
39
|
-
${NOT_A_DEFECT}`);
|
|
28
|
+
throw new Error("".concat(PREPEND, "you are trying to use a date selector while providing a non-string \"date\" or providing a non-function to \"onDateChange\"\n the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n Received:\n ").concat(date, "(").concat(typeof date, ")\n ").concat(onDateChange, "(").concat(typeof onDateChange, ")\n ").concat(NOT_A_DEFECT));
|
|
40
29
|
};
|
|
41
30
|
|
|
42
31
|
const throwUncontrolledTimeError = (time, onTimeChange) => {
|
|
43
|
-
throw new Error(
|
|
44
|
-
the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
|
|
45
|
-
|
|
46
|
-
Received:
|
|
47
|
-
${time}(${typeof time})
|
|
48
|
-
${onTimeChange}(${typeof onTimeChange})
|
|
49
|
-
${NOT_A_DEFECT}`);
|
|
32
|
+
throw new Error("".concat(PREPEND, "you are trying to use a time selector while providing a non-string \"time\" or providing a non-function to \"onTimeChange\"\n the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n Received:\n ").concat(time, "(").concat(typeof time, ")\n ").concat(onTimeChange, "(").concat(typeof onTimeChange, ")\n ").concat(NOT_A_DEFECT));
|
|
50
33
|
};
|
|
51
34
|
|
|
52
35
|
const throwUncontrolledDateTimeError = (dateTime, onDateTimeChange) => {
|
|
53
|
-
throw new Error(
|
|
54
|
-
the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
|
|
55
|
-
|
|
56
|
-
Received:
|
|
57
|
-
${dateTime}(${typeof dateTime})
|
|
58
|
-
${onDateTimeChange}(${typeof onDateTimeChange})
|
|
59
|
-
${NOT_A_DEFECT}`);
|
|
36
|
+
throw new Error("".concat(PREPEND, "you are trying to use a date-time selector while providing a non-string \"dateTime\" or providing a non-function to \"onDateTimeChange\"\n the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n Received:\n ").concat(dateTime, "(").concat(typeof dateTime, ")\n ").concat(onDateTimeChange, "(").concat(typeof onDateTimeChange, ")\n ").concat(NOT_A_DEFECT));
|
|
60
37
|
};
|
|
61
38
|
|
|
62
39
|
const throwInvalidEmptyPickerStartingMonthError = emptyPickerStartingMonth => {
|
|
63
|
-
throw new Error(
|
|
64
|
-
|
|
65
|
-
Received:
|
|
66
|
-
${emptyPickerStartingMonth}(${typeof emptyPickerStartingMonth})
|
|
67
|
-
${NOT_A_DEFECT}`);
|
|
40
|
+
throw new Error("".concat(PREPEND, "the provided emptyPickerStartingMonth props is invalid. please provide a string with the format mm/__/yyyy, (mm 01~12, yyyy 0001~9999) \n\n Received:\n ").concat(emptyPickerStartingMonth, "(").concat(typeof emptyPickerStartingMonth, ")\n ").concat(NOT_A_DEFECT));
|
|
68
41
|
};
|
|
69
42
|
|
|
70
43
|
const throwInvalidOnCalendarOpenFocusedDayError = onCalendarOpenFocusedDay => {
|
|
71
|
-
throw new Error(
|
|
72
|
-
|
|
73
|
-
Received:
|
|
74
|
-
${onCalendarOpenFocusedDay}(${typeof onCalendarOpenFocusedDay})
|
|
75
|
-
${NOT_A_DEFECT}`);
|
|
44
|
+
throw new Error("".concat(PREPEND, "the provided onCalendarOpenFocusedDay props is invalid. please provide a string with the format mm/dd/yyyy, (mm 01~12, dd 01~31, yyyy 0001~9999) \n\n Received:\n ").concat(onCalendarOpenFocusedDay, "(").concat(typeof onCalendarOpenFocusedDay, ")\n ").concat(NOT_A_DEFECT));
|
|
76
45
|
};
|
|
77
46
|
|
|
78
47
|
const useValidateProps = props => {
|
|
@@ -47,7 +47,7 @@ const DDInput = /*#__PURE__*/React__default["default"].memo(({
|
|
|
47
47
|
value: value,
|
|
48
48
|
ref: contextRef,
|
|
49
49
|
placeholder: placeholder,
|
|
50
|
-
"aria-label":
|
|
50
|
+
"aria-label": "day input field, ".concat(ariaCurrentValueForInputs),
|
|
51
51
|
"data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY
|
|
52
52
|
});
|
|
53
53
|
});
|
|
@@ -49,7 +49,7 @@ const MMInput = /*#__PURE__*/React__default["default"].memo(({
|
|
|
49
49
|
value: value,
|
|
50
50
|
ref: contextRef,
|
|
51
51
|
placeholder: placeholder,
|
|
52
|
-
"aria-label":
|
|
52
|
+
"aria-label": "month input field, ".concat(ariaCurrentValueForInputs),
|
|
53
53
|
"data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH
|
|
54
54
|
});
|
|
55
55
|
});
|
|
@@ -47,7 +47,7 @@ const YYYYInput = /*#__PURE__*/React__default["default"].memo(({
|
|
|
47
47
|
value: value,
|
|
48
48
|
ref: contextRef,
|
|
49
49
|
placeholder: placeholder,
|
|
50
|
-
"aria-label":
|
|
50
|
+
"aria-label": "year input field, ".concat(ariaCurrentValueForInputs),
|
|
51
51
|
"data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR
|
|
52
52
|
});
|
|
53
53
|
});
|
|
@@ -100,7 +100,7 @@ const useDateInputs = () => {
|
|
|
100
100
|
const monthInteger = Number.isNaN(monthStringConvertedToInteger) ? 0 : monthStringConvertedToInteger;
|
|
101
101
|
let newMonth;
|
|
102
102
|
if (key === 'ArrowUp') newMonth = monthInteger + 1 <= 12 ? monthInteger + 1 : monthInteger;else newMonth = monthInteger - 1 > 0 ? monthInteger - 1 : 1;
|
|
103
|
-
newMonth = stringHelpers.prependStringWithPlaceHolders(
|
|
103
|
+
newMonth = stringHelpers.prependStringWithPlaceHolders("".concat(newMonth), 2);
|
|
104
104
|
handleChangeMonth(newMonth, e);
|
|
105
105
|
}
|
|
106
106
|
}, [onHomeKeyDown, onEndKeyDown, month, handleChangeMonth]);
|
|
@@ -159,7 +159,7 @@ const useDateInputs = () => {
|
|
|
159
159
|
const dayInteger = Number.isNaN(dayStringConvertedToInteger) ? 0 : dayStringConvertedToInteger;
|
|
160
160
|
let newDay;
|
|
161
161
|
if (key === 'ArrowUp') newDay = dayInteger + 1 <= 31 ? dayInteger + 1 : dayInteger;else newDay = dayInteger - 1 > 0 ? dayInteger - 1 : 1;
|
|
162
|
-
newDay = stringHelpers.prependStringWithPlaceHolders(
|
|
162
|
+
newDay = stringHelpers.prependStringWithPlaceHolders("".concat(newDay), 2);
|
|
163
163
|
handleChangeDay(newDay, e);
|
|
164
164
|
}
|
|
165
165
|
}, [onHomeKeyDown, onEndKeyDown, handleChangeDay, day]);
|
|
@@ -224,7 +224,7 @@ const useDateInputs = () => {
|
|
|
224
224
|
const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
|
|
225
225
|
let newYear;
|
|
226
226
|
if (key === 'ArrowUp') newYear = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;else newYear = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
|
|
227
|
-
newYear = stringHelpers.prependStringWithPlaceHolders(
|
|
227
|
+
newYear = stringHelpers.prependStringWithPlaceHolders("".concat(newYear), 4);
|
|
228
228
|
handleChangeYear(newYear, e);
|
|
229
229
|
}
|
|
230
230
|
}, [onHomeKeyDown, onEndKeyDown, handleChangeYear, year]);
|
|
@@ -24,7 +24,7 @@ const CalendarDaysList = /*#__PURE__*/React__default["default"].memo(({
|
|
|
24
24
|
children: [/*#__PURE__*/_jsx__default["default"](Day.Day, {
|
|
25
25
|
metaDay: invisibleFirstDay,
|
|
26
26
|
isInvisible: true
|
|
27
|
-
},
|
|
27
|
+
}, "ds-calendar-".concat(invisibleFirstDay.day.toString())), daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysListWrapper, {
|
|
28
28
|
role: "row",
|
|
29
29
|
"aria-rowindex": i + 1,
|
|
30
30
|
cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
|
|
@@ -33,13 +33,13 @@ const CalendarDaysList = /*#__PURE__*/React__default["default"].memo(({
|
|
|
33
33
|
px: "2px",
|
|
34
34
|
justifyContent: "space-between",
|
|
35
35
|
alignItems: "center"
|
|
36
|
-
},
|
|
36
|
+
}, "ds-calendar-week-".concat(week[0].day.toString(), "-").concat(week[6].day.toString()), week.map((metaDay, z) => /*#__PURE__*/_jsx__default["default"](Day.Day, {
|
|
37
37
|
metaDay: metaDay,
|
|
38
38
|
colIndex: z + 1
|
|
39
|
-
},
|
|
39
|
+
}, "ds-calendar-".concat(metaDay.day.toString()))))), /*#__PURE__*/_jsx__default["default"](Day.Day, {
|
|
40
40
|
metaDay: invisibleLastDay,
|
|
41
41
|
isInvisible: true
|
|
42
|
-
},
|
|
42
|
+
}, "ds-calendar-".concat(invisibleLastDay.day.toString()))]
|
|
43
43
|
}));
|
|
44
44
|
|
|
45
45
|
exports.CalendarDaysList = CalendarDaysList;
|
|
@@ -29,8 +29,8 @@ const useGetFormattedCurrentDate = () => {
|
|
|
29
29
|
currentMonth,
|
|
30
30
|
currentYear
|
|
31
31
|
} = React.useContext(CalendarContext.CalendarContext);
|
|
32
|
-
const monthString = currentMonth >= 0 && currentMonth <= 11 ?
|
|
33
|
-
return React.useMemo(() =>
|
|
32
|
+
const monthString = currentMonth >= 0 && currentMonth <= 11 ? "".concat(dateHelpers.getMonthNameByMonthNumber(currentMonth), " ") : '';
|
|
33
|
+
return React.useMemo(() => "".concat(monthString).concat(currentYear), [monthString, currentYear]);
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
const CalendarHead = () => {
|
|
@@ -27,7 +27,7 @@ const CalendarIconTrigger = () => {
|
|
|
27
27
|
ariaCurrentValueForInputs
|
|
28
28
|
} = React.useContext(CalendarContext.CalendarContext);
|
|
29
29
|
return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Styleds.StyledIconTriggerButton, {
|
|
30
|
-
"aria-label":
|
|
30
|
+
"aria-label": "date picker context menu trigger, ".concat(ariaCurrentValueForInputs),
|
|
31
31
|
buttonType: "icon",
|
|
32
32
|
size: dsButton.BUTTON_SIZES.M,
|
|
33
33
|
variant: dsButton.BUTTON_VARIANT.DEFAULT,
|
|
@@ -88,9 +88,9 @@ const Day = ({
|
|
|
88
88
|
day: dayNumber,
|
|
89
89
|
year
|
|
90
90
|
} = dateHelpers.getDateValuesFromDate(day);
|
|
91
|
-
onMonthChange(
|
|
92
|
-
onDayChange(
|
|
93
|
-
onYearChange(
|
|
91
|
+
onMonthChange("".concat(month + 1), e, metaInfo);
|
|
92
|
+
onDayChange("".concat(dayNumber), e, metaInfo);
|
|
93
|
+
onYearChange("".concat(year), e, metaInfo);
|
|
94
94
|
handleChangeComposedDateString(newDateString, metaInfo);
|
|
95
95
|
setLatestInteractionRegion('calendar-days');
|
|
96
96
|
if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();
|
|
@@ -99,7 +99,7 @@ const Day = ({
|
|
|
99
99
|
const handleOnDayFocus = React.useCallback(() => {
|
|
100
100
|
setLatestInteractionRegion('calendar-days');
|
|
101
101
|
}, [setLatestInteractionRegion]);
|
|
102
|
-
const dayClassModifiers = React.useMemo(() =>
|
|
102
|
+
const dayClassModifiers = React.useMemo(() => "dayWrapper ".concat(isSelected ? 'selectedDay ' : '').concat(isDisabled ? 'disabledDay ' : '').concat(isOutOfRange ? 'outOfRangeDay ' : '').concat(isFocused ? 'focusedDay ' : '').concat(isStartRangeDay ? 'startRangeDay ' : '').concat(isDayInRange ? 'inRangeDay ' : '').concat(isEndRangeDay ? 'endRangeDay ' : '').concat(isCurrMonthDay ? '' : 'notCurrentMonth'), [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
|
|
103
103
|
let dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.DAY;
|
|
104
104
|
if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
|
|
105
105
|
if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;
|
|
@@ -112,7 +112,7 @@ const Day = ({
|
|
|
112
112
|
'aria-colindex': colIndex
|
|
113
113
|
}), {}, {
|
|
114
114
|
children: /*#__PURE__*/_jsx__default["default"](Styleds.StyledDayBtn, {
|
|
115
|
-
"aria-label":
|
|
115
|
+
"aria-label": "".concat(stringHelpers.getAriaDayFromDateString(dayAsString), ", ").concat(constants.weekDays[metaDay.day.getDay()]),
|
|
116
116
|
"aria-disabled": isOutOfRange || isDisabled,
|
|
117
117
|
"aria-hidden": !!isInvisible,
|
|
118
118
|
buttonType: "raw",
|
|
@@ -127,7 +127,7 @@ const Day = ({
|
|
|
127
127
|
tabIndex: isSelected ? 0 : -1,
|
|
128
128
|
"data-isfocused": isFocused,
|
|
129
129
|
"data-testid": dataTestid
|
|
130
|
-
}, void 0,
|
|
130
|
+
}, void 0, "".concat(day.getDate()))
|
|
131
131
|
}));
|
|
132
132
|
};
|
|
133
133
|
|
|
@@ -11,11 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
12
|
|
|
13
13
|
/* eslint-disable max-lines */
|
|
14
|
-
const focusBorder =
|
|
15
|
-
border-style: solid;
|
|
16
|
-
border-width: 2px;
|
|
17
|
-
border-radius: 50%;
|
|
18
|
-
`;
|
|
14
|
+
const focusBorder = "\n border-style: solid;\n border-width: 2px;\n border-radius: 50%;\n";
|
|
19
15
|
const StyledIconTriggerButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
|
|
20
16
|
componentId: "sc-18gg4kd-0"
|
|
21
17
|
})(["color:", ";width:26px;height:26px;"], ({
|
|
@@ -76,7 +72,7 @@ const StyledWeekDaysListWrapper = /*#__PURE__*/styled__default["default"](dsGrid
|
|
|
76
72
|
}) => theme.fontSizes.label[400], ({
|
|
77
73
|
isHeader,
|
|
78
74
|
theme
|
|
79
|
-
}) => isHeader ?
|
|
75
|
+
}) => isHeader ? "background: ".concat(theme.colors.neutral['050']) : '', ({
|
|
80
76
|
isHeader
|
|
81
77
|
}) => isHeader ? 'text-transform: capitalize' : '', ({
|
|
82
78
|
theme
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
5
6
|
var React = require('react');
|
|
6
7
|
var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
|
|
7
8
|
var useKeyboardHandlers = require('./useKeyboardHandlers.js');
|
|
@@ -9,8 +10,6 @@ var useFocusLogic = require('./useFocusLogic.js');
|
|
|
9
10
|
var usePopperTriggerLogic = require('./usePopperTriggerLogic.js');
|
|
10
11
|
var useCurrentDisplayedMonthYearLogic = require('./useCurrentDisplayedMonthYearLogic.js');
|
|
11
12
|
|
|
12
|
-
/* eslint-disable complexity */
|
|
13
|
-
|
|
14
13
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
15
14
|
function sliceIntoChunks(arr, chunkSize) {
|
|
16
15
|
const res = [];
|
package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
5
6
|
var React = require('react');
|
|
6
7
|
var useGetMonthYearFromDateStringOrEmptyStartingMonth = require('../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js');
|
|
7
8
|
var dateHelpers = require('../../../utils/dateHelpers.js');
|
|
8
9
|
|
|
9
|
-
/* eslint-disable complexity */
|
|
10
10
|
const useCurrentDisplayedMonthYearLogic = () => {
|
|
11
11
|
const {
|
|
12
12
|
month: monthFromDateString,
|
|
@@ -2,12 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
5
6
|
var React = require('react');
|
|
6
7
|
var dateHelpers = require('../../../utils/dateHelpers.js');
|
|
7
8
|
var useGetStartingFocusedDay = require('../../../utils/hooks/useGetStartingFocusedDay.js');
|
|
8
9
|
|
|
9
|
-
/* eslint-disable complexity */
|
|
10
|
-
|
|
11
10
|
// eslint-disable-next-line max-params
|
|
12
11
|
const loopWhileWaiting = (cb, shortcircuit = () => false, timePerTry = 100, maxTries = 5) => {
|
|
13
12
|
let ab = maxTries;
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
5
6
|
var React = require('react');
|
|
6
7
|
var reactPopper = require('react-popper');
|
|
7
8
|
var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
|
|
8
9
|
|
|
9
|
-
/* eslint-disable complexity */
|
|
10
10
|
const usePopperTriggerLogic = ({
|
|
11
11
|
focusedDay,
|
|
12
12
|
resetFocusedDayToStartDate,
|
|
@@ -27,7 +27,7 @@ const CalendarWithTimeWheelIconTrigger = () => {
|
|
|
27
27
|
ariaCurrentValueForInputs
|
|
28
28
|
} = React.useContext(CalendarWithTimeWheelContext.CalendarWithTimeWheelContext);
|
|
29
29
|
return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Styleds.StyledIconTriggerButton, {
|
|
30
|
-
"aria-label":
|
|
30
|
+
"aria-label": "date time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
|
|
31
31
|
buttonType: "icon",
|
|
32
32
|
size: dsButton.BUTTON_SIZES.M,
|
|
33
33
|
variant: dsButton.BUTTON_VARIANT.DEFAULT,
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
5
6
|
var React = require('react');
|
|
6
7
|
var reactPopper = require('react-popper');
|
|
7
8
|
var ControlledDateTimePickerTypes = require('../../../ControlledDateTimePickerTypes.js');
|
|
@@ -10,7 +11,6 @@ var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
|
|
|
10
11
|
var CalendarContext = require('../Calendar/CalendarContext.js');
|
|
11
12
|
var TimeWheelContext = require('../TimeWheel/TimeWheelContext.js');
|
|
12
13
|
|
|
13
|
-
/* eslint-disable max-statements */
|
|
14
14
|
const useConfigCalendarWithTimeWheelCTX = () => {
|
|
15
15
|
const {
|
|
16
16
|
pickerButtonRef,
|
|
@@ -51,9 +51,9 @@ const HoursList = () => {
|
|
|
51
51
|
"data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
|
|
52
52
|
tabIndex: -1
|
|
53
53
|
}, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleHours.map(hourString => {
|
|
54
|
-
const key =
|
|
54
|
+
const key = "timewheel-hour-".concat(hourString);
|
|
55
55
|
if (!hourString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
|
|
56
|
-
const currHourTimeString =
|
|
56
|
+
const currHourTimeString = "".concat(hourString, ":").concat(minutes || '00', " ").concat(meridiem || 'AM');
|
|
57
57
|
const isEmptyCurrValueCurrentListItem = !hours && numberHelpers.convertToPositiveNumberIfPossible(hourString) === currHourNum;
|
|
58
58
|
const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;
|
|
59
59
|
const isDisabled = getIsDisabledTime(currHourTimeString);
|
|
@@ -69,7 +69,7 @@ const HoursList = () => {
|
|
|
69
69
|
autoFocus: autoFocusHourTimeWheel && isCurrentListItem,
|
|
70
70
|
"data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR'],
|
|
71
71
|
selected: hours.length === 2 && numberHelpers.convertToPositiveNumberIfPossible(hourString) === currHourNum,
|
|
72
|
-
"aria-label":
|
|
72
|
+
"aria-label": "".concat(hourString, " hours"),
|
|
73
73
|
"aria-disabled": isDisabled,
|
|
74
74
|
isDisabled: isDisabled,
|
|
75
75
|
buttonType: "raw",
|
|
@@ -80,7 +80,7 @@ const HoursList = () => {
|
|
|
80
80
|
"aria-valuemax": "12",
|
|
81
81
|
"aria-valuemin": "1",
|
|
82
82
|
"aria-valuenow": currHourNum,
|
|
83
|
-
"aria-valuetext":
|
|
83
|
+
"aria-valuetext": "".concat(hourString, " hours")
|
|
84
84
|
}, btnProps), {}, {
|
|
85
85
|
children: hourString
|
|
86
86
|
})));
|
|
@@ -30,9 +30,9 @@ const MeridiemList = () => {
|
|
|
30
30
|
} = React.useContext(TimeWheelContext.TimeWheelContext);
|
|
31
31
|
const isAmCurrent = !meridiem || meridiem === 'AM';
|
|
32
32
|
const isPmCurrent = meridiem === 'PM';
|
|
33
|
-
const hourMinuteString =
|
|
34
|
-
const amTimeString =
|
|
35
|
-
const pmTimeString =
|
|
33
|
+
const hourMinuteString = "".concat(hours || '01', ":").concat(minutes || '00');
|
|
34
|
+
const amTimeString = "".concat(hourMinuteString, " AM");
|
|
35
|
+
const pmTimeString = "".concat(hourMinuteString, " PM");
|
|
36
36
|
const isDisabledAm = getIsDisabledTime(amTimeString);
|
|
37
37
|
const isDisabledPm = getIsDisabledTime(pmTimeString);
|
|
38
38
|
return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
|
|
@@ -52,7 +52,7 @@ const MeridiemList = () => {
|
|
|
52
52
|
isCurrentListItem: isAmCurrent,
|
|
53
53
|
"data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
|
|
54
54
|
selected: meridiem === 'AM',
|
|
55
|
-
"aria-label":
|
|
55
|
+
"aria-label": "AM ".concat(isAmCurrent ? 'selected' : ''),
|
|
56
56
|
"aria-disabled": isDisabledAm,
|
|
57
57
|
isDisabled: isDisabledAm,
|
|
58
58
|
buttonType: "raw",
|
|
@@ -71,7 +71,7 @@ const MeridiemList = () => {
|
|
|
71
71
|
}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimeBtn, {
|
|
72
72
|
isCurrentListItem: isPmCurrent,
|
|
73
73
|
"data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
|
|
74
|
-
"aria-label":
|
|
74
|
+
"aria-label": "PM ".concat(isPmCurrent ? 'selected' : ''),
|
|
75
75
|
"aria-disabled": isDisabledPm,
|
|
76
76
|
isDisabled: isDisabledPm,
|
|
77
77
|
buttonType: "raw",
|