@transferwise/components 0.0.0-experimental-2825d2d → 0.0.0-experimental-1413ac0
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/build/i18n/zh-HK.json +2 -2
- package/build/index.esm.js +186 -277
- package/build/index.esm.js.map +1 -1
- package/build/index.js +159 -250
- package/build/index.js.map +1 -1
- package/build/types/body/Body.d.ts +1 -1
- package/build/types/common/commonProps.d.ts +1 -1
- package/build/types/common/commonProps.d.ts.map +1 -1
- package/build/types/common/dateUtils/getDayNames/getDayNames.d.ts +1 -1
- package/build/types/common/dateUtils/getDayNames/getDayNames.d.ts.map +1 -1
- package/build/types/common/dateUtils/getDayNames/index.d.ts +1 -1
- package/build/types/common/dateUtils/getDayNames/index.d.ts.map +1 -1
- package/build/types/common/dateUtils/getMonthNames/getMonthNames.d.ts +1 -1
- package/build/types/common/dateUtils/getMonthNames/getMonthNames.d.ts.map +1 -1
- package/build/types/common/dateUtils/getMonthNames/index.d.ts +1 -1
- package/build/types/common/dateUtils/getMonthNames/index.d.ts.map +1 -1
- package/build/types/common/dateUtils/index.d.ts +6 -6
- package/build/types/common/dateUtils/index.d.ts.map +1 -1
- package/build/types/common/dateUtils/isDateValid/index.d.ts +1 -1
- package/build/types/common/dateUtils/isDateValid/index.d.ts.map +1 -1
- package/build/types/common/dateUtils/isDateValid/isDateValid.d.ts +2 -2
- package/build/types/common/dateUtils/isDateValid/isDateValid.d.ts.map +1 -1
- package/build/types/common/dateUtils/isMonthAndYearFormat/index.d.ts +1 -1
- package/build/types/common/dateUtils/isMonthAndYearFormat/index.d.ts.map +1 -1
- package/build/types/common/dateUtils/isMonthAndYearFormat/isMonthAndYearFormat.d.ts +1 -1
- package/build/types/common/dateUtils/isMonthAndYearFormat/isMonthAndYearFormat.d.ts.map +1 -1
- package/build/types/common/dateUtils/isWithinRange/index.d.ts +1 -1
- package/build/types/common/dateUtils/isWithinRange/index.d.ts.map +1 -1
- package/build/types/common/dateUtils/isWithinRange/isWithinRange.d.ts +1 -1
- package/build/types/common/dateUtils/isWithinRange/isWithinRange.d.ts.map +1 -1
- package/build/types/common/dateUtils/moveToWithinRange/index.d.ts +1 -1
- package/build/types/common/dateUtils/moveToWithinRange/index.d.ts.map +1 -1
- package/build/types/common/dateUtils/moveToWithinRange/moveToWithinRange.d.ts +1 -1
- package/build/types/common/dateUtils/moveToWithinRange/moveToWithinRange.d.ts.map +1 -1
- package/build/types/common/panel/Panel.d.ts +1 -1
- package/build/types/common/responsivePanel/ResponsivePanel.d.ts +1 -1
- package/build/types/dateInput/DateInput.d.ts +41 -35
- package/build/types/dateInput/DateInput.d.ts.map +1 -1
- package/build/types/dateInput/DateInput.messages.d.ts +33 -24
- package/build/types/dateInput/DateInput.messages.d.ts.map +1 -1
- package/build/types/dateInput/index.d.ts +1 -1
- package/build/types/dateInput/index.d.ts.map +1 -1
- package/build/types/dateInput/utils/convertToLocalMidnight/convertToLocalMidnight.d.ts +1 -1
- package/build/types/dateInput/utils/convertToLocalMidnight/convertToLocalMidnight.d.ts.map +1 -1
- package/build/types/dateInput/utils/convertToLocalMidnight/index.d.ts +1 -1
- package/build/types/dateInput/utils/convertToLocalMidnight/index.d.ts.map +1 -1
- package/build/types/dateInput/utils/explodeDate/explodeDate.d.ts +5 -2
- package/build/types/dateInput/utils/explodeDate/explodeDate.d.ts.map +1 -1
- package/build/types/dateInput/utils/explodeDate/index.d.ts +1 -1
- package/build/types/dateInput/utils/explodeDate/index.d.ts.map +1 -1
- package/build/types/dateInput/utils/index.d.ts +2 -2
- package/build/types/dateInput/utils/index.d.ts.map +1 -1
- package/build/types/decision/Decision.d.ts +39 -52
- package/build/types/decision/Decision.d.ts.map +1 -1
- package/build/types/decision/index.d.ts +1 -2
- package/build/types/decision/index.d.ts.map +1 -1
- package/build/types/dimmer/Dimmer.d.ts +1 -1
- package/build/types/index.d.ts +1 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/types/promoCard/PromoCard.d.ts +1 -2
- package/build/types/promoCard/PromoCard.d.ts.map +1 -1
- package/build/types/select/searchBox/SearchBox.d.ts +1 -1
- package/package.json +1 -1
- package/src/common/commonProps.ts +1 -1
- package/src/common/dateUtils/getDayNames/{getDayNames.ts → getDayNames.js} +2 -5
- package/src/common/dateUtils/getMonthNames/{getMonthNames.ts → getMonthNames.js} +3 -5
- package/src/common/dateUtils/getMonthNames/getMonthNames.spec.js +8 -9
- package/src/common/dateUtils/isDateValid/isDateValid.js +6 -0
- package/src/common/dateUtils/isDateValid/{isDateValid.spec.ts → isDateValid.spec.js} +2 -2
- package/src/common/dateUtils/isMonthAndYearFormat/{isMonthAndYearFormat.ts → isMonthAndYearFormat.js} +1 -1
- package/src/common/dateUtils/isMonthAndYearFormat/isMonthAndYearFormat.spec.js +7 -3
- package/src/common/dateUtils/isWithinRange/{isWithinRange.ts → isWithinRange.js} +1 -1
- package/src/common/dateUtils/isWithinRange/{isWithinRange.spec.ts → isWithinRange.spec.js} +6 -6
- package/src/common/dateUtils/moveToWithinRange/{moveToWithinRange.ts → moveToWithinRange.js} +2 -2
- package/src/dateInput/{DateInput.tsx → DateInput.js} +97 -120
- package/src/dateInput/DateInput.spec.js +55 -6
- package/src/dateInput/DateInput.story.tsx +7 -9
- package/src/dateInput/utils/convertToLocalMidnight/{convertToLocalMidnight.ts → convertToLocalMidnight.js} +1 -1
- package/src/dateInput/utils/explodeDate/{explodeDate.ts → explodeDate.js} +1 -3
- package/src/dateLookup/dayCalendar/table/DayCalendarTable.js +0 -1
- package/src/decision/Decision.spec.js +53 -59
- package/src/decision/{Decision.story.js → Decision.story.tsx} +5 -5
- package/src/decision/Decision.tsx +136 -0
- package/src/decision/index.ts +1 -0
- package/src/i18n/zh-HK.json +2 -2
- package/src/index.ts +1 -0
- package/src/promoCard/PromoCard.tsx +1 -2
- package/src/tile/Tile.js +1 -1
- package/build/types/decision/decisionEnums.d.ts +0 -9
- package/build/types/decision/decisionEnums.d.ts.map +0 -1
- package/build/types/sizeSwapper/SizeSwapper.d.ts +0 -3
- package/build/types/sizeSwapper/SizeSwapper.d.ts.map +0 -1
- package/build/types/sizeSwapper/index.d.ts +0 -2
- package/build/types/sizeSwapper/index.d.ts.map +0 -1
- package/src/common/dateUtils/isDateValid/isDateValid.ts +0 -13
- package/src/decision/Decision.js +0 -148
- package/src/decision/decisionEnums.ts +0 -11
- package/src/decision/index.js +0 -2
- package/src/sizeSwapper/SizeSwapper.js +0 -69
- package/src/sizeSwapper/SizeSwapper.spec.js +0 -100
- package/src/sizeSwapper/SizeSwapper.story.js +0 -34
- package/src/sizeSwapper/index.js +0 -1
- /package/src/common/dateUtils/getDayNames/{index.ts → index.js} +0 -0
- /package/src/common/dateUtils/getMonthNames/{index.ts → index.js} +0 -0
- /package/src/common/dateUtils/{index.ts → index.js} +0 -0
- /package/src/common/dateUtils/isDateValid/{index.ts → index.js} +0 -0
- /package/src/common/dateUtils/isMonthAndYearFormat/{index.ts → index.js} +0 -0
- /package/src/common/dateUtils/isWithinRange/{index.ts → index.js} +0 -0
- /package/src/common/dateUtils/moveToWithinRange/{index.ts → index.js} +0 -0
- /package/src/dateInput/{DateInput.messages.ts → DateInput.messages.js} +0 -0
- /package/src/dateInput/{index.ts → index.js} +0 -0
- /package/src/dateInput/utils/convertToLocalMidnight/{convertToLocalMidnight.spec.ts → convertToLocalMidnight.spec.js} +0 -0
- /package/src/dateInput/utils/convertToLocalMidnight/{index.ts → index.js} +0 -0
- /package/src/dateInput/utils/explodeDate/{explodeDate.spec.ts → explodeDate.spec.js} +0 -0
- /package/src/dateInput/utils/explodeDate/{index.ts → index.js} +0 -0
- /package/src/dateInput/utils/{index.ts → index.js} +0 -0
package/build/index.js
CHANGED
|
@@ -8,7 +8,6 @@ var icons = require('@transferwise/icons');
|
|
|
8
8
|
var reactIntl = require('react-intl');
|
|
9
9
|
var PropTypes = require('prop-types');
|
|
10
10
|
var componentsTheming = require('@wise/components-theming');
|
|
11
|
-
var formatting = require('@transferwise/formatting');
|
|
12
11
|
var react$1 = require('@headlessui/react');
|
|
13
12
|
var mergeProps = require('merge-props');
|
|
14
13
|
var mergeRefs = require('react-merge-refs');
|
|
@@ -16,6 +15,7 @@ var shim = require('use-sync-external-store/shim');
|
|
|
16
15
|
var react = require('@floating-ui/react');
|
|
17
16
|
var focus = require('@react-aria/focus');
|
|
18
17
|
var overlays = require('@react-aria/overlays');
|
|
18
|
+
var formatting = require('@transferwise/formatting');
|
|
19
19
|
var reactTransitionGroup = require('react-transition-group');
|
|
20
20
|
var reactPopper = require('react-popper');
|
|
21
21
|
var throttle = require('lodash.throttle');
|
|
@@ -2775,15 +2775,15 @@ function getDayNames(locale, format = 'short') {
|
|
|
2775
2775
|
return days;
|
|
2776
2776
|
}
|
|
2777
2777
|
|
|
2778
|
+
function isWithinRange(date, min, max) {
|
|
2779
|
+
return !date || (!min || date >= min) && (!max || date <= max);
|
|
2780
|
+
}
|
|
2781
|
+
|
|
2778
2782
|
// Makes sure that date is between min and max dates, returns a cloned min or max
|
|
2779
2783
|
function moveToWithinRange(date, min, max) {
|
|
2780
2784
|
return isWithinRange(date, min, max) ? date : new Date(min && date < min ? +min : +max);
|
|
2781
2785
|
}
|
|
2782
2786
|
|
|
2783
|
-
function isWithinRange(date, min, max) {
|
|
2784
|
-
return !date || (!min || date >= min) && (!max || date <= max);
|
|
2785
|
-
}
|
|
2786
|
-
|
|
2787
2787
|
const getMonthNames = (locale, format = 'long') => {
|
|
2788
2788
|
const months = [];
|
|
2789
2789
|
const date = new Date(2018, 0, 1);
|
|
@@ -2797,17 +2797,9 @@ const getMonthNames = (locale, format = 'long') => {
|
|
|
2797
2797
|
return months;
|
|
2798
2798
|
};
|
|
2799
2799
|
|
|
2800
|
-
const isDateValid = date =>
|
|
2801
|
-
|
|
2802
|
-
|
|
2803
|
-
} else if (date instanceof Date) {
|
|
2804
|
-
return validDateObject(date);
|
|
2805
|
-
} else {
|
|
2806
|
-
return validDateString(date);
|
|
2807
|
-
}
|
|
2808
|
-
};
|
|
2809
|
-
const validDateString = dateString => validDateObject(new Date(dateString));
|
|
2810
|
-
const validDateObject = dateObject => !isNaN(dateObject.getTime());
|
|
2800
|
+
const isDateValid = date => validDateObject(date) || validDateString(date);
|
|
2801
|
+
const validDateString = dateString => typeof dateString === 'string' && validDateObject(new Date(dateString));
|
|
2802
|
+
const validDateObject = dateObject => dateObject instanceof Date && !isNaN(dateObject); // eslint-disable-line no-restricted-globals
|
|
2811
2803
|
|
|
2812
2804
|
const isMonthAndYearFormat = dateString => validDateString(dateString) && dateString.split('-').length < 3;
|
|
2813
2805
|
|
|
@@ -2842,6 +2834,7 @@ const explodeDate = date => {
|
|
|
2842
2834
|
|
|
2843
2835
|
const convertToLocalMidnight = date => {
|
|
2844
2836
|
const utcDate = new Date(date.split('T')[0]); // using YYYY-MM-DD creates UTC date
|
|
2837
|
+
|
|
2845
2838
|
return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());
|
|
2846
2839
|
};
|
|
2847
2840
|
|
|
@@ -2854,21 +2847,21 @@ const INITIAL_DEFAULT_STATE = {
|
|
|
2854
2847
|
const DateInput = ({
|
|
2855
2848
|
'aria-labelledby': ariaLabelledBy,
|
|
2856
2849
|
'aria-label': ariaLabel,
|
|
2857
|
-
disabled
|
|
2858
|
-
size
|
|
2859
|
-
value
|
|
2850
|
+
disabled,
|
|
2851
|
+
size,
|
|
2852
|
+
value,
|
|
2860
2853
|
dayLabel,
|
|
2861
2854
|
dayAutoComplete,
|
|
2862
2855
|
monthLabel,
|
|
2863
2856
|
yearLabel,
|
|
2864
2857
|
yearAutoComplete,
|
|
2865
|
-
monthFormat
|
|
2866
|
-
mode
|
|
2858
|
+
monthFormat,
|
|
2859
|
+
mode,
|
|
2867
2860
|
onChange,
|
|
2868
2861
|
onFocus,
|
|
2869
|
-
onBlur
|
|
2862
|
+
onBlur,
|
|
2870
2863
|
placeholders,
|
|
2871
|
-
id
|
|
2864
|
+
id,
|
|
2872
2865
|
selectProps
|
|
2873
2866
|
}) => {
|
|
2874
2867
|
const {
|
|
@@ -2885,10 +2878,8 @@ const DateInput = ({
|
|
|
2885
2878
|
let explodedDate = INITIAL_DEFAULT_STATE;
|
|
2886
2879
|
if (value && isDateValid(value)) {
|
|
2887
2880
|
const dateObject = getDateObject();
|
|
2888
|
-
|
|
2889
|
-
|
|
2890
|
-
}
|
|
2891
|
-
if (typeof value === 'string' && isMonthAndYearFormat(value)) {
|
|
2881
|
+
explodedDate = explodeDate(dateObject);
|
|
2882
|
+
if (isMonthAndYearFormat(value)) {
|
|
2892
2883
|
explodedDate.day = null;
|
|
2893
2884
|
}
|
|
2894
2885
|
}
|
|
@@ -2907,7 +2898,7 @@ const DateInput = ({
|
|
|
2907
2898
|
year: placeholders?.year || formatMessage(messages$9.yearPlaceholder)
|
|
2908
2899
|
};
|
|
2909
2900
|
const getDateAsString = date => {
|
|
2910
|
-
if (
|
|
2901
|
+
if (!isDateValid(date)) {
|
|
2911
2902
|
return '';
|
|
2912
2903
|
}
|
|
2913
2904
|
switch (mode) {
|
|
@@ -2928,12 +2919,14 @@ const DateInput = ({
|
|
|
2928
2919
|
}), /*#__PURE__*/jsxRuntime.jsx(SelectInput, {
|
|
2929
2920
|
name: "month",
|
|
2930
2921
|
disabled: disabled,
|
|
2931
|
-
placeholder: placeholders
|
|
2922
|
+
placeholder: placeholders.month,
|
|
2932
2923
|
items: monthOptions,
|
|
2933
2924
|
size: size,
|
|
2934
|
-
value: monthOptions.find(item => item.value === month)?.value,
|
|
2935
|
-
renderValue:
|
|
2936
|
-
|
|
2925
|
+
value: monthOptions.find(item => item.value.value === month)?.value,
|
|
2926
|
+
renderValue: ({
|
|
2927
|
+
label
|
|
2928
|
+
}) => /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContent, {
|
|
2929
|
+
title: label
|
|
2937
2930
|
}),
|
|
2938
2931
|
onChange: selectedValue => handleMonthChange(selectedValue),
|
|
2939
2932
|
...selectProps
|
|
@@ -2942,10 +2935,14 @@ const DateInput = ({
|
|
|
2942
2935
|
};
|
|
2943
2936
|
const getMonthsOptions = () => {
|
|
2944
2937
|
const options = [];
|
|
2945
|
-
|
|
2938
|
+
const months = getMonthNames(locale, monthFormat);
|
|
2939
|
+
months.forEach((label, index) => {
|
|
2946
2940
|
options.push({
|
|
2947
2941
|
type: 'option',
|
|
2948
|
-
value:
|
|
2942
|
+
value: {
|
|
2943
|
+
label,
|
|
2944
|
+
value: index
|
|
2945
|
+
}
|
|
2949
2946
|
});
|
|
2950
2947
|
});
|
|
2951
2948
|
return options;
|
|
@@ -2957,33 +2954,35 @@ const DateInput = ({
|
|
|
2957
2954
|
broadcastNewValue(INITIAL_DEFAULT_STATE);
|
|
2958
2955
|
}
|
|
2959
2956
|
if (mode === exports.DateMode.MONTH_YEAR) {
|
|
2960
|
-
if (newMonth
|
|
2957
|
+
if (newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
|
|
2961
2958
|
broadcastNewValue(newValue);
|
|
2962
2959
|
}
|
|
2963
|
-
} else if (newDay && newMonth
|
|
2960
|
+
} else if (newDay && newMonth >= 0 && newYear && (newDay !== day || newMonth !== month || newYear !== year)) {
|
|
2964
2961
|
broadcastNewValue(newValue);
|
|
2965
2962
|
}
|
|
2966
2963
|
};
|
|
2967
2964
|
const handleDayChange = event => {
|
|
2968
2965
|
const {
|
|
2969
2966
|
checkedDay
|
|
2970
|
-
} = checkDate(
|
|
2967
|
+
} = checkDate(event.target.value, month, year);
|
|
2971
2968
|
setDay(checkedDay);
|
|
2972
2969
|
handleInternalValue(checkedDay, month, year);
|
|
2973
2970
|
};
|
|
2974
2971
|
const handleMonthChange = selectedValue => {
|
|
2975
|
-
if (selectedValue
|
|
2972
|
+
if (!selectedValue) {
|
|
2976
2973
|
setMonth(null);
|
|
2977
2974
|
handleInternalValue(day, null, year);
|
|
2978
2975
|
return;
|
|
2979
2976
|
}
|
|
2980
|
-
const selectedMonth = selectedValue ? selectedValue : 0;
|
|
2977
|
+
const selectedMonth = selectedValue ? selectedValue.value : 0;
|
|
2981
2978
|
const {
|
|
2982
2979
|
checkedDay
|
|
2983
2980
|
} = checkDate(day, selectedMonth, year);
|
|
2984
2981
|
setMonth(selectedMonth);
|
|
2985
|
-
if (day
|
|
2986
|
-
|
|
2982
|
+
if (day) {
|
|
2983
|
+
if (checkedDay !== day) {
|
|
2984
|
+
setDay(checkedDay);
|
|
2985
|
+
}
|
|
2987
2986
|
}
|
|
2988
2987
|
handleInternalValue(checkedDay, selectedMonth, year);
|
|
2989
2988
|
};
|
|
@@ -2994,37 +2993,35 @@ const DateInput = ({
|
|
|
2994
2993
|
// Correct day based on year and month.
|
|
2995
2994
|
const {
|
|
2996
2995
|
checkedDay
|
|
2997
|
-
} = checkDate(day, month,
|
|
2998
|
-
if (day
|
|
2999
|
-
|
|
2996
|
+
} = checkDate(day, month, newValue);
|
|
2997
|
+
if (day) {
|
|
2998
|
+
if (checkedDay !== day) {
|
|
2999
|
+
setDay(checkedDay);
|
|
3000
|
+
}
|
|
3000
3001
|
}
|
|
3001
|
-
setYear(
|
|
3002
|
-
handleInternalValue(checkedDay, month,
|
|
3002
|
+
setYear(slicedYear);
|
|
3003
|
+
handleInternalValue(checkedDay, month, slicedYear);
|
|
3003
3004
|
} else {
|
|
3004
|
-
setYear(
|
|
3005
|
+
setYear(slicedYear);
|
|
3005
3006
|
handleInternalValue(day, month, null);
|
|
3006
3007
|
}
|
|
3007
3008
|
};
|
|
3008
3009
|
const broadcastNewValue = newValue => {
|
|
3009
3010
|
if (newValue !== lastBroadcastedValue) {
|
|
3010
3011
|
setLastBroadcastedValue(newValue);
|
|
3011
|
-
|
|
3012
|
-
onChange(null);
|
|
3013
|
-
} else {
|
|
3014
|
-
onChange(getDateAsString(newValue) || null);
|
|
3015
|
-
}
|
|
3012
|
+
onChange(getDateAsString(newValue) || null);
|
|
3016
3013
|
}
|
|
3017
3014
|
};
|
|
3018
3015
|
const checkDate = (newDay = null, newMonth = 0, newYear = null) => {
|
|
3019
3016
|
let checkedDay = newDay;
|
|
3020
|
-
const maxDay = new Date(newYear || 2000, newMonth
|
|
3017
|
+
const maxDay = new Date(newYear || 2000, newMonth + 1, 0).getDate();
|
|
3021
3018
|
if (!newDay) {
|
|
3022
3019
|
checkedDay = null;
|
|
3023
3020
|
}
|
|
3024
|
-
if (newDay && newDay < 0) {
|
|
3021
|
+
if (newDay && newDay < 0 || newDay === '00') {
|
|
3025
3022
|
checkedDay = 1;
|
|
3026
3023
|
}
|
|
3027
|
-
if (newDay && newMonth || newDay
|
|
3024
|
+
if (newDay && newMonth || newDay > 31) {
|
|
3028
3025
|
checkedDay = newDay > maxDay ? maxDay : newDay;
|
|
3029
3026
|
}
|
|
3030
3027
|
return {
|
|
@@ -3044,10 +3041,8 @@ const DateInput = ({
|
|
|
3044
3041
|
id: id,
|
|
3045
3042
|
"aria-labelledby": ariaLabelledBy,
|
|
3046
3043
|
"aria-label": ariaLabel,
|
|
3047
|
-
|
|
3048
|
-
,
|
|
3049
|
-
onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation(),
|
|
3050
|
-
onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation(),
|
|
3044
|
+
onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus() : event.stopPropagation(),
|
|
3045
|
+
onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur() : event.stopPropagation(),
|
|
3051
3046
|
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3052
3047
|
className: "row",
|
|
3053
3048
|
children: [monthBeforeDay && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
@@ -3100,6 +3095,7 @@ const DateInput = ({
|
|
|
3100
3095
|
})
|
|
3101
3096
|
});
|
|
3102
3097
|
};
|
|
3098
|
+
|
|
3103
3099
|
// Should only propagate if the relatedTarget is not part of this DateInput component.
|
|
3104
3100
|
function shouldPropagateOnFocus({
|
|
3105
3101
|
target,
|
|
@@ -3109,6 +3105,7 @@ function shouldPropagateOnFocus({
|
|
|
3109
3105
|
const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');
|
|
3110
3106
|
return targetParent !== relatedParent;
|
|
3111
3107
|
}
|
|
3108
|
+
|
|
3112
3109
|
// Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.
|
|
3113
3110
|
function shouldPropagateOnBlur({
|
|
3114
3111
|
target,
|
|
@@ -3125,6 +3122,42 @@ function shouldPropagateOnBlur({
|
|
|
3125
3122
|
const focusElementParent = focusElement && focusElement.closest('.tw-date');
|
|
3126
3123
|
return blurElementParent !== focusElementParent;
|
|
3127
3124
|
}
|
|
3125
|
+
DateInput.propTypes = {
|
|
3126
|
+
'aria-label': PropTypes__default.default.string,
|
|
3127
|
+
'aria-labelledby': PropTypes__default.default.string,
|
|
3128
|
+
disabled: PropTypes__default.default.bool,
|
|
3129
|
+
size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
|
|
3130
|
+
value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.instanceOf(Date)]),
|
|
3131
|
+
onChange: PropTypes__default.default.func.isRequired,
|
|
3132
|
+
onFocus: PropTypes__default.default.func,
|
|
3133
|
+
onBlur: PropTypes__default.default.func,
|
|
3134
|
+
dayLabel: PropTypes__default.default.string,
|
|
3135
|
+
dayAutoComplete: PropTypes__default.default.string,
|
|
3136
|
+
monthLabel: PropTypes__default.default.string,
|
|
3137
|
+
yearLabel: PropTypes__default.default.string,
|
|
3138
|
+
yearAutoComplete: PropTypes__default.default.string,
|
|
3139
|
+
monthFormat: PropTypes__default.default.oneOf(['long', 'short']),
|
|
3140
|
+
mode: PropTypes__default.default.oneOf(['day-month-year', 'month-year']),
|
|
3141
|
+
placeholders: PropTypes__default.default.shape({
|
|
3142
|
+
day: PropTypes__default.default.node,
|
|
3143
|
+
month: PropTypes__default.default.node,
|
|
3144
|
+
year: PropTypes__default.default.node
|
|
3145
|
+
}),
|
|
3146
|
+
id: PropTypes__default.default.string,
|
|
3147
|
+
selectProps: PropTypes__default.default.object
|
|
3148
|
+
};
|
|
3149
|
+
DateInput.defaultProps = {
|
|
3150
|
+
disabled: false,
|
|
3151
|
+
size: exports.Size.MEDIUM,
|
|
3152
|
+
value: null,
|
|
3153
|
+
onFocus: null,
|
|
3154
|
+
onBlur: null,
|
|
3155
|
+
monthFormat: exports.MonthFormat.LONG,
|
|
3156
|
+
mode: exports.DateMode.DAY_MONTH_YEAR,
|
|
3157
|
+
id: '',
|
|
3158
|
+
selectProps: {}
|
|
3159
|
+
};
|
|
3160
|
+
var DateInput$1 = DateInput;
|
|
3128
3161
|
|
|
3129
3162
|
const POPOVER_OFFSET = [0, 16];
|
|
3130
3163
|
// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
|
|
@@ -4369,19 +4402,6 @@ DateLookup.defaultProps = {
|
|
|
4369
4402
|
};
|
|
4370
4403
|
var DateLookup$1 = DateLookup;
|
|
4371
4404
|
|
|
4372
|
-
// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
|
|
4373
|
-
exports.DecisionPresentation = void 0;
|
|
4374
|
-
(function (Presentation) {
|
|
4375
|
-
Presentation["LIST"] = "LIST";
|
|
4376
|
-
Presentation["LIST_BLOCK"] = "LIST_BLOCK";
|
|
4377
|
-
Presentation["LIST_BLOCK_GRID"] = "LIST_BLOCK_GRID";
|
|
4378
|
-
})(exports.DecisionPresentation || (exports.DecisionPresentation = {}));
|
|
4379
|
-
// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
|
|
4380
|
-
exports.DecisionType = void 0;
|
|
4381
|
-
(function (Type) {
|
|
4382
|
-
Type["NAVIGATION"] = "NAVIGATION";
|
|
4383
|
-
})(exports.DecisionType || (exports.DecisionType = {}));
|
|
4384
|
-
|
|
4385
4405
|
const NavigationOption = /*#__PURE__*/React.forwardRef(({
|
|
4386
4406
|
as: component = 'button',
|
|
4387
4407
|
disabled = false,
|
|
@@ -4415,70 +4435,6 @@ const NavigationOption = /*#__PURE__*/React.forwardRef(({
|
|
|
4415
4435
|
});
|
|
4416
4436
|
});
|
|
4417
4437
|
|
|
4418
|
-
const Layout = {
|
|
4419
|
-
COLUMN: 'COLUMN'
|
|
4420
|
-
};
|
|
4421
|
-
const SizeSwapper = /*#__PURE__*/React.forwardRef(({
|
|
4422
|
-
items,
|
|
4423
|
-
inline
|
|
4424
|
-
}, reference) => {
|
|
4425
|
-
const parentReference = React.useRef(null);
|
|
4426
|
-
const [clientWidth] = useClientWidth({
|
|
4427
|
-
ref: reference || parentReference
|
|
4428
|
-
});
|
|
4429
|
-
if (!items || items.length === 0) {
|
|
4430
|
-
return null;
|
|
4431
|
-
}
|
|
4432
|
-
// If all breakpoints are specified and clientWidth never > breakpoint itemsToRender can be undefined.
|
|
4433
|
-
// Do not use deconstruct here to get items and layout.
|
|
4434
|
-
let itemsToRender = [];
|
|
4435
|
-
if (clientWidth) {
|
|
4436
|
-
itemsToRender = items.filter(({
|
|
4437
|
-
breakpoint = 0
|
|
4438
|
-
}) => clientWidth >= breakpoint).pop();
|
|
4439
|
-
} else {
|
|
4440
|
-
// On SSR environments useClientWidth returns null because ref is undefined so we render
|
|
4441
|
-
// all elements by default.
|
|
4442
|
-
// If there's no SSR and on first Hydration only the right elements are going to be rendered.
|
|
4443
|
-
// If clientWidth is null or zero all elements render like a responsive technique would do.
|
|
4444
|
-
itemsToRender.items = items.map(({
|
|
4445
|
-
items
|
|
4446
|
-
}) => Object.values(items));
|
|
4447
|
-
}
|
|
4448
|
-
|
|
4449
|
-
// Always return parent container even if there are no items to display to
|
|
4450
|
-
// keep the ref on DOM and let clientWidth be calculated properly.
|
|
4451
|
-
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4452
|
-
ref: parentReference,
|
|
4453
|
-
className: classNames__default.default('np-size-swapper', {
|
|
4454
|
-
'd-flex': !inline,
|
|
4455
|
-
'd-inline-flex': inline,
|
|
4456
|
-
'flex-column': itemsToRender && itemsToRender.layout === Layout.COLUMN,
|
|
4457
|
-
'flex-wrap': itemsToRender && itemsToRender.wrap
|
|
4458
|
-
}),
|
|
4459
|
-
style: {
|
|
4460
|
-
visibility: clientWidth ? 'visible' : 'hidden'
|
|
4461
|
-
},
|
|
4462
|
-
children: itemsToRender && itemsToRender.items
|
|
4463
|
-
});
|
|
4464
|
-
});
|
|
4465
|
-
SizeSwapper.Breakpoint = exports.Breakpoint;
|
|
4466
|
-
SizeSwapper.Layout = Layout;
|
|
4467
|
-
SizeSwapper.propTypes = {
|
|
4468
|
-
inline: PropTypes__default.default.bool,
|
|
4469
|
-
/** List of items that will appear at the specified breakpoint and presented in row or columns depending on layout */
|
|
4470
|
-
items: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
|
|
4471
|
-
items: PropTypes__default.default.arrayOf(PropTypes__default.default.element),
|
|
4472
|
-
breakpoint: PropTypes__default.default.number,
|
|
4473
|
-
layout: PropTypes__default.default.oneOf([SizeSwapper.Layout.COLUMN]),
|
|
4474
|
-
wrap: PropTypes__default.default.bool
|
|
4475
|
-
})).isRequired
|
|
4476
|
-
};
|
|
4477
|
-
SizeSwapper.defaultProps = {
|
|
4478
|
-
inline: false
|
|
4479
|
-
};
|
|
4480
|
-
var SizeSwapper$1 = SizeSwapper;
|
|
4481
|
-
|
|
4482
4438
|
const Tile = ({
|
|
4483
4439
|
className,
|
|
4484
4440
|
description,
|
|
@@ -4527,7 +4483,7 @@ Tile.propTypes = {
|
|
|
4527
4483
|
className: PropTypes__default.default.string,
|
|
4528
4484
|
description: PropTypes__default.default.node,
|
|
4529
4485
|
disabled: PropTypes__default.default.bool,
|
|
4530
|
-
href: PropTypes__default.default.string
|
|
4486
|
+
href: PropTypes__default.default.string,
|
|
4531
4487
|
target: PropTypes__default.default.oneOf(['_self', '_blank', '_parent', '_top']),
|
|
4532
4488
|
/** Accepts only Avatar and images */
|
|
4533
4489
|
media: PropTypes__default.default.node.isRequired,
|
|
@@ -4546,85 +4502,28 @@ Tile.defaultProps = {
|
|
|
4546
4502
|
};
|
|
4547
4503
|
var Tile$1 = Tile;
|
|
4548
4504
|
|
|
4505
|
+
exports.DecisionPresentation = void 0;
|
|
4506
|
+
(function (DecisionPresentation) {
|
|
4507
|
+
DecisionPresentation["LIST"] = "LIST";
|
|
4508
|
+
DecisionPresentation["LIST_BLOCK"] = "LIST_BLOCK";
|
|
4509
|
+
DecisionPresentation["LIST_BLOCK_GRID"] = "LIST_BLOCK_GRID";
|
|
4510
|
+
})(exports.DecisionPresentation || (exports.DecisionPresentation = {}));
|
|
4511
|
+
exports.DecisionType = void 0;
|
|
4512
|
+
(function (DecisionType) {
|
|
4513
|
+
DecisionType["NAVIGATION"] = "NAVIGATION";
|
|
4514
|
+
})(exports.DecisionType || (exports.DecisionType = {}));
|
|
4549
4515
|
const Decision = ({
|
|
4550
4516
|
options,
|
|
4551
|
-
presentation,
|
|
4552
|
-
|
|
4553
|
-
|
|
4554
|
-
|
|
4555
|
-
|
|
4517
|
+
presentation = exports.DecisionPresentation.LIST,
|
|
4518
|
+
size = exports.Size.MEDIUM,
|
|
4519
|
+
type = exports.DecisionType.NAVIGATION,
|
|
4520
|
+
showMediaCircleInList = true,
|
|
4521
|
+
isContainerAligned = false
|
|
4556
4522
|
}) => {
|
|
4523
|
+
const screenXs = useScreenSize(exports.Breakpoint.EXTRA_SMALL);
|
|
4524
|
+
const screenSm = useScreenSize(exports.Breakpoint.SMALL);
|
|
4557
4525
|
if (type === exports.DecisionType.NAVIGATION) {
|
|
4558
|
-
const {
|
|
4559
|
-
LIST_BLOCK,
|
|
4560
|
-
LIST_BLOCK_GRID
|
|
4561
|
-
} = exports.DecisionPresentation;
|
|
4562
|
-
if (presentation === LIST_BLOCK || presentation === LIST_BLOCK_GRID) {
|
|
4563
|
-
const isSmall = size === exports.Size.SMALL;
|
|
4564
|
-
const isGrid = presentation === LIST_BLOCK_GRID;
|
|
4565
|
-
const items = [{
|
|
4566
|
-
items: [],
|
|
4567
|
-
layout: SizeSwapper$1.Layout.COLUMN
|
|
4568
|
-
}, {
|
|
4569
|
-
items: [],
|
|
4570
|
-
breakpoint: isSmall ? exports.Breakpoint.EXTRA_SMALL : exports.Breakpoint.SMALL,
|
|
4571
|
-
wrap: isGrid
|
|
4572
|
-
}];
|
|
4573
|
-
options.forEach(({
|
|
4574
|
-
description,
|
|
4575
|
-
disabled,
|
|
4576
|
-
href,
|
|
4577
|
-
target,
|
|
4578
|
-
media: {
|
|
4579
|
-
block,
|
|
4580
|
-
list
|
|
4581
|
-
},
|
|
4582
|
-
onClick,
|
|
4583
|
-
title
|
|
4584
|
-
}, key) => {
|
|
4585
|
-
items[0].items.push( /*#__PURE__*/jsxRuntime.jsx(NavigationOption
|
|
4586
|
-
// eslint-disable-next-line react/no-array-index-key
|
|
4587
|
-
, {
|
|
4588
|
-
complex: false,
|
|
4589
|
-
content: description,
|
|
4590
|
-
disabled: disabled,
|
|
4591
|
-
href: href,
|
|
4592
|
-
target: target,
|
|
4593
|
-
media: list,
|
|
4594
|
-
showMediaAtAllSizes: true,
|
|
4595
|
-
showMediaCircle: showMediaCircleInList,
|
|
4596
|
-
isContainerAligned: isContainerAligned,
|
|
4597
|
-
title: title,
|
|
4598
|
-
onClick: onClick
|
|
4599
|
-
}, `nav-${key}`));
|
|
4600
|
-
items[1].items.push( /*#__PURE__*/jsxRuntime.jsx(Tile$1
|
|
4601
|
-
// eslint-disable-next-line react/no-array-index-key
|
|
4602
|
-
, {
|
|
4603
|
-
className: classNames__default.default(`np-decision__tile${isSmall ? '--small' : ''}`, {
|
|
4604
|
-
'np-decision__tile--fixed-width': isGrid
|
|
4605
|
-
}),
|
|
4606
|
-
description: description,
|
|
4607
|
-
disabled: disabled,
|
|
4608
|
-
href: href,
|
|
4609
|
-
target: target,
|
|
4610
|
-
media: block,
|
|
4611
|
-
size: isSmall ? exports.Size.SMALL : exports.Size.MEDIUM,
|
|
4612
|
-
title: title,
|
|
4613
|
-
onClick: onClick
|
|
4614
|
-
}, `tile-${key}`));
|
|
4615
|
-
});
|
|
4616
|
-
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4617
|
-
className: classNames__default.default('np-decision', {
|
|
4618
|
-
'np-decision--small': isSmall,
|
|
4619
|
-
'np-decision--grid': isGrid
|
|
4620
|
-
}),
|
|
4621
|
-
children: /*#__PURE__*/jsxRuntime.jsx(SizeSwapper$1, {
|
|
4622
|
-
items: items
|
|
4623
|
-
})
|
|
4624
|
-
});
|
|
4625
|
-
}
|
|
4626
|
-
// LIST
|
|
4627
|
-
return options.map(({
|
|
4526
|
+
const renderedOptions = options.map(({
|
|
4628
4527
|
title,
|
|
4629
4528
|
description,
|
|
4630
4529
|
disabled,
|
|
@@ -4649,42 +4548,52 @@ const Decision = ({
|
|
|
4649
4548
|
title: title,
|
|
4650
4549
|
onClick: onClick
|
|
4651
4550
|
}, `nav-${key}`));
|
|
4551
|
+
if (presentation === exports.DecisionPresentation.LIST_BLOCK || presentation === exports.DecisionPresentation.LIST_BLOCK_GRID) {
|
|
4552
|
+
const isSmall = size === exports.Size.SMALL;
|
|
4553
|
+
const breakpoint = isSmall ? screenXs : screenSm;
|
|
4554
|
+
const isGrid = presentation === exports.DecisionPresentation.LIST_BLOCK_GRID;
|
|
4555
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4556
|
+
className: classNames__default.default('np-decision', {
|
|
4557
|
+
'np-decision--small': isSmall,
|
|
4558
|
+
'np-decision--grid': isGrid
|
|
4559
|
+
}),
|
|
4560
|
+
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4561
|
+
className: classNames__default.default('np-size-swapper d-flex', breakpoint ? isGrid && 'flex-wrap' : 'flex-column'),
|
|
4562
|
+
children: breakpoint ? options.map(({
|
|
4563
|
+
description,
|
|
4564
|
+
disabled,
|
|
4565
|
+
href,
|
|
4566
|
+
target,
|
|
4567
|
+
media: {
|
|
4568
|
+
block
|
|
4569
|
+
},
|
|
4570
|
+
onClick,
|
|
4571
|
+
title
|
|
4572
|
+
}, key) => /*#__PURE__*/jsxRuntime.jsx(Tile$1
|
|
4573
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
4574
|
+
, {
|
|
4575
|
+
className: classNames__default.default(`np-decision__tile${isSmall ? '--small' : ''}`, {
|
|
4576
|
+
'np-decision__tile--fixed-width': isGrid
|
|
4577
|
+
}),
|
|
4578
|
+
description: description,
|
|
4579
|
+
disabled: disabled,
|
|
4580
|
+
href: href,
|
|
4581
|
+
target: target,
|
|
4582
|
+
media: block,
|
|
4583
|
+
size: isSmall ? exports.Size.SMALL : exports.Size.MEDIUM,
|
|
4584
|
+
title: title,
|
|
4585
|
+
onClick: onClick
|
|
4586
|
+
}, `tile-${key}`)) : renderedOptions
|
|
4587
|
+
})
|
|
4588
|
+
});
|
|
4589
|
+
}
|
|
4590
|
+
// LIST
|
|
4591
|
+
return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
4592
|
+
children: renderedOptions
|
|
4593
|
+
});
|
|
4652
4594
|
}
|
|
4653
|
-
return
|
|
4654
|
-
};
|
|
4655
|
-
Decision.propTypes = {
|
|
4656
|
-
/** A list of elements to be rendered */
|
|
4657
|
-
options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
|
|
4658
|
-
description: PropTypes__default.default.node,
|
|
4659
|
-
disabled: PropTypes__default.default.bool,
|
|
4660
|
-
href: PropTypes__default.default.string,
|
|
4661
|
-
target: PropTypes__default.default.oneOf(['_self', '_blank', '_parent', '_top']),
|
|
4662
|
-
media: PropTypes__default.default.shape({
|
|
4663
|
-
block: PropTypes__default.default.node.isRequired,
|
|
4664
|
-
list: PropTypes__default.default.node.isRequired
|
|
4665
|
-
}),
|
|
4666
|
-
onClick: PropTypes__default.default.func,
|
|
4667
|
-
title: PropTypes__default.default.node.isRequired
|
|
4668
|
-
})).isRequired,
|
|
4669
|
-
/** Handles the display mode of the component */
|
|
4670
|
-
presentation: PropTypes__default.default.oneOf(['LIST', 'LIST_BLOCK', 'LIST_BLOCK_GRID']),
|
|
4671
|
-
/** Size currently affects only Tile dimension */
|
|
4672
|
-
size: PropTypes__default.default.oneOf(['sm', 'md']),
|
|
4673
|
-
/** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */
|
|
4674
|
-
type: PropTypes__default.default.oneOf(['NAVIGATION']),
|
|
4675
|
-
/** Display media in a circle in list presentation */
|
|
4676
|
-
showMediaCircleInList: PropTypes__default.default.bool,
|
|
4677
|
-
/** Sets navigation options to be aligned with the parent container */
|
|
4678
|
-
isContainerAligned: PropTypes__default.default.bool
|
|
4679
|
-
};
|
|
4680
|
-
Decision.defaultProps = {
|
|
4681
|
-
presentation: exports.DecisionPresentation.LIST,
|
|
4682
|
-
size: exports.Size.MEDIUM,
|
|
4683
|
-
type: exports.DecisionType.NAVIGATION,
|
|
4684
|
-
showMediaCircleInList: true,
|
|
4685
|
-
isContainerAligned: false
|
|
4595
|
+
return null;
|
|
4686
4596
|
};
|
|
4687
|
-
var Decision$1 = Decision;
|
|
4688
4597
|
|
|
4689
4598
|
const isLayoutHorizontal = layout => [exports.Layout.HORIZONTAL_LEFT_ALIGNED, exports.Layout.HORIZONTAL_RIGHT_ALIGNED, exports.Layout.HORIZONTAL_JUSTIFIED].includes(layout);
|
|
4690
4599
|
const getAlignmentClasses = (layout, action) => {
|
|
@@ -15441,10 +15350,10 @@ var zhHK = {
|
|
|
15441
15350
|
"neptune.ClearButton.ariaLabel": "清除",
|
|
15442
15351
|
"neptune.CloseButton.ariaLabel": "關閉",
|
|
15443
15352
|
"neptune.DateInput.day.label": "日",
|
|
15444
|
-
"neptune.DateInput.day.placeholder": "
|
|
15353
|
+
"neptune.DateInput.day.placeholder": "DD",
|
|
15445
15354
|
"neptune.DateInput.month.label": "月",
|
|
15446
15355
|
"neptune.DateInput.year.label": "年",
|
|
15447
|
-
"neptune.DateInput.year.placeholder": "
|
|
15356
|
+
"neptune.DateInput.year.placeholder": "YYYY",
|
|
15448
15357
|
"neptune.DateLookup.day": "日",
|
|
15449
15358
|
"neptune.DateLookup.goTo20YearView": "切換至20年視圖",
|
|
15450
15359
|
"neptune.DateLookup.month": "月",
|
|
@@ -15536,9 +15445,9 @@ exports.CircularButton = CircularButton$1;
|
|
|
15536
15445
|
exports.CriticalCommsBanner = CriticalCommsBanner;
|
|
15537
15446
|
exports.DEFAULT_LANG = DEFAULT_LANG;
|
|
15538
15447
|
exports.DEFAULT_LOCALE = DEFAULT_LOCALE;
|
|
15539
|
-
exports.DateInput = DateInput;
|
|
15448
|
+
exports.DateInput = DateInput$1;
|
|
15540
15449
|
exports.DateLookup = DateLookup$1;
|
|
15541
|
-
exports.Decision = Decision
|
|
15450
|
+
exports.Decision = Decision;
|
|
15542
15451
|
exports.DefinitionList = DefinitionList$1;
|
|
15543
15452
|
exports.Dimmer = Dimmer$1;
|
|
15544
15453
|
exports.DirectionProvider = DirectionProvider;
|