@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.
Files changed (116) hide show
  1. package/build/i18n/zh-HK.json +2 -2
  2. package/build/index.esm.js +186 -277
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +159 -250
  5. package/build/index.js.map +1 -1
  6. package/build/types/body/Body.d.ts +1 -1
  7. package/build/types/common/commonProps.d.ts +1 -1
  8. package/build/types/common/commonProps.d.ts.map +1 -1
  9. package/build/types/common/dateUtils/getDayNames/getDayNames.d.ts +1 -1
  10. package/build/types/common/dateUtils/getDayNames/getDayNames.d.ts.map +1 -1
  11. package/build/types/common/dateUtils/getDayNames/index.d.ts +1 -1
  12. package/build/types/common/dateUtils/getDayNames/index.d.ts.map +1 -1
  13. package/build/types/common/dateUtils/getMonthNames/getMonthNames.d.ts +1 -1
  14. package/build/types/common/dateUtils/getMonthNames/getMonthNames.d.ts.map +1 -1
  15. package/build/types/common/dateUtils/getMonthNames/index.d.ts +1 -1
  16. package/build/types/common/dateUtils/getMonthNames/index.d.ts.map +1 -1
  17. package/build/types/common/dateUtils/index.d.ts +6 -6
  18. package/build/types/common/dateUtils/index.d.ts.map +1 -1
  19. package/build/types/common/dateUtils/isDateValid/index.d.ts +1 -1
  20. package/build/types/common/dateUtils/isDateValid/index.d.ts.map +1 -1
  21. package/build/types/common/dateUtils/isDateValid/isDateValid.d.ts +2 -2
  22. package/build/types/common/dateUtils/isDateValid/isDateValid.d.ts.map +1 -1
  23. package/build/types/common/dateUtils/isMonthAndYearFormat/index.d.ts +1 -1
  24. package/build/types/common/dateUtils/isMonthAndYearFormat/index.d.ts.map +1 -1
  25. package/build/types/common/dateUtils/isMonthAndYearFormat/isMonthAndYearFormat.d.ts +1 -1
  26. package/build/types/common/dateUtils/isMonthAndYearFormat/isMonthAndYearFormat.d.ts.map +1 -1
  27. package/build/types/common/dateUtils/isWithinRange/index.d.ts +1 -1
  28. package/build/types/common/dateUtils/isWithinRange/index.d.ts.map +1 -1
  29. package/build/types/common/dateUtils/isWithinRange/isWithinRange.d.ts +1 -1
  30. package/build/types/common/dateUtils/isWithinRange/isWithinRange.d.ts.map +1 -1
  31. package/build/types/common/dateUtils/moveToWithinRange/index.d.ts +1 -1
  32. package/build/types/common/dateUtils/moveToWithinRange/index.d.ts.map +1 -1
  33. package/build/types/common/dateUtils/moveToWithinRange/moveToWithinRange.d.ts +1 -1
  34. package/build/types/common/dateUtils/moveToWithinRange/moveToWithinRange.d.ts.map +1 -1
  35. package/build/types/common/panel/Panel.d.ts +1 -1
  36. package/build/types/common/responsivePanel/ResponsivePanel.d.ts +1 -1
  37. package/build/types/dateInput/DateInput.d.ts +41 -35
  38. package/build/types/dateInput/DateInput.d.ts.map +1 -1
  39. package/build/types/dateInput/DateInput.messages.d.ts +33 -24
  40. package/build/types/dateInput/DateInput.messages.d.ts.map +1 -1
  41. package/build/types/dateInput/index.d.ts +1 -1
  42. package/build/types/dateInput/index.d.ts.map +1 -1
  43. package/build/types/dateInput/utils/convertToLocalMidnight/convertToLocalMidnight.d.ts +1 -1
  44. package/build/types/dateInput/utils/convertToLocalMidnight/convertToLocalMidnight.d.ts.map +1 -1
  45. package/build/types/dateInput/utils/convertToLocalMidnight/index.d.ts +1 -1
  46. package/build/types/dateInput/utils/convertToLocalMidnight/index.d.ts.map +1 -1
  47. package/build/types/dateInput/utils/explodeDate/explodeDate.d.ts +5 -2
  48. package/build/types/dateInput/utils/explodeDate/explodeDate.d.ts.map +1 -1
  49. package/build/types/dateInput/utils/explodeDate/index.d.ts +1 -1
  50. package/build/types/dateInput/utils/explodeDate/index.d.ts.map +1 -1
  51. package/build/types/dateInput/utils/index.d.ts +2 -2
  52. package/build/types/dateInput/utils/index.d.ts.map +1 -1
  53. package/build/types/decision/Decision.d.ts +39 -52
  54. package/build/types/decision/Decision.d.ts.map +1 -1
  55. package/build/types/decision/index.d.ts +1 -2
  56. package/build/types/decision/index.d.ts.map +1 -1
  57. package/build/types/dimmer/Dimmer.d.ts +1 -1
  58. package/build/types/index.d.ts +1 -0
  59. package/build/types/index.d.ts.map +1 -1
  60. package/build/types/promoCard/PromoCard.d.ts +1 -2
  61. package/build/types/promoCard/PromoCard.d.ts.map +1 -1
  62. package/build/types/select/searchBox/SearchBox.d.ts +1 -1
  63. package/package.json +1 -1
  64. package/src/common/commonProps.ts +1 -1
  65. package/src/common/dateUtils/getDayNames/{getDayNames.ts → getDayNames.js} +2 -5
  66. package/src/common/dateUtils/getMonthNames/{getMonthNames.ts → getMonthNames.js} +3 -5
  67. package/src/common/dateUtils/getMonthNames/getMonthNames.spec.js +8 -9
  68. package/src/common/dateUtils/isDateValid/isDateValid.js +6 -0
  69. package/src/common/dateUtils/isDateValid/{isDateValid.spec.ts → isDateValid.spec.js} +2 -2
  70. package/src/common/dateUtils/isMonthAndYearFormat/{isMonthAndYearFormat.ts → isMonthAndYearFormat.js} +1 -1
  71. package/src/common/dateUtils/isMonthAndYearFormat/isMonthAndYearFormat.spec.js +7 -3
  72. package/src/common/dateUtils/isWithinRange/{isWithinRange.ts → isWithinRange.js} +1 -1
  73. package/src/common/dateUtils/isWithinRange/{isWithinRange.spec.ts → isWithinRange.spec.js} +6 -6
  74. package/src/common/dateUtils/moveToWithinRange/{moveToWithinRange.ts → moveToWithinRange.js} +2 -2
  75. package/src/dateInput/{DateInput.tsx → DateInput.js} +97 -120
  76. package/src/dateInput/DateInput.spec.js +55 -6
  77. package/src/dateInput/DateInput.story.tsx +7 -9
  78. package/src/dateInput/utils/convertToLocalMidnight/{convertToLocalMidnight.ts → convertToLocalMidnight.js} +1 -1
  79. package/src/dateInput/utils/explodeDate/{explodeDate.ts → explodeDate.js} +1 -3
  80. package/src/dateLookup/dayCalendar/table/DayCalendarTable.js +0 -1
  81. package/src/decision/Decision.spec.js +53 -59
  82. package/src/decision/{Decision.story.js → Decision.story.tsx} +5 -5
  83. package/src/decision/Decision.tsx +136 -0
  84. package/src/decision/index.ts +1 -0
  85. package/src/i18n/zh-HK.json +2 -2
  86. package/src/index.ts +1 -0
  87. package/src/promoCard/PromoCard.tsx +1 -2
  88. package/src/tile/Tile.js +1 -1
  89. package/build/types/decision/decisionEnums.d.ts +0 -9
  90. package/build/types/decision/decisionEnums.d.ts.map +0 -1
  91. package/build/types/sizeSwapper/SizeSwapper.d.ts +0 -3
  92. package/build/types/sizeSwapper/SizeSwapper.d.ts.map +0 -1
  93. package/build/types/sizeSwapper/index.d.ts +0 -2
  94. package/build/types/sizeSwapper/index.d.ts.map +0 -1
  95. package/src/common/dateUtils/isDateValid/isDateValid.ts +0 -13
  96. package/src/decision/Decision.js +0 -148
  97. package/src/decision/decisionEnums.ts +0 -11
  98. package/src/decision/index.js +0 -2
  99. package/src/sizeSwapper/SizeSwapper.js +0 -69
  100. package/src/sizeSwapper/SizeSwapper.spec.js +0 -100
  101. package/src/sizeSwapper/SizeSwapper.story.js +0 -34
  102. package/src/sizeSwapper/index.js +0 -1
  103. /package/src/common/dateUtils/getDayNames/{index.ts → index.js} +0 -0
  104. /package/src/common/dateUtils/getMonthNames/{index.ts → index.js} +0 -0
  105. /package/src/common/dateUtils/{index.ts → index.js} +0 -0
  106. /package/src/common/dateUtils/isDateValid/{index.ts → index.js} +0 -0
  107. /package/src/common/dateUtils/isMonthAndYearFormat/{index.ts → index.js} +0 -0
  108. /package/src/common/dateUtils/isWithinRange/{index.ts → index.js} +0 -0
  109. /package/src/common/dateUtils/moveToWithinRange/{index.ts → index.js} +0 -0
  110. /package/src/dateInput/{DateInput.messages.ts → DateInput.messages.js} +0 -0
  111. /package/src/dateInput/{index.ts → index.js} +0 -0
  112. /package/src/dateInput/utils/convertToLocalMidnight/{convertToLocalMidnight.spec.ts → convertToLocalMidnight.spec.js} +0 -0
  113. /package/src/dateInput/utils/convertToLocalMidnight/{index.ts → index.js} +0 -0
  114. /package/src/dateInput/utils/explodeDate/{explodeDate.spec.ts → explodeDate.spec.js} +0 -0
  115. /package/src/dateInput/utils/explodeDate/{index.ts → index.js} +0 -0
  116. /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
- if (date === null) {
2802
- return false;
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 = false,
2858
- size = exports.Size.MEDIUM,
2859
- value = null,
2850
+ disabled,
2851
+ size,
2852
+ value,
2860
2853
  dayLabel,
2861
2854
  dayAutoComplete,
2862
2855
  monthLabel,
2863
2856
  yearLabel,
2864
2857
  yearAutoComplete,
2865
- monthFormat = exports.MonthFormat.LONG,
2866
- mode = exports.DateMode.DAY_MONTH_YEAR,
2858
+ monthFormat,
2859
+ mode,
2867
2860
  onChange,
2868
2861
  onFocus,
2869
- onBlur = undefined,
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
- if (dateObject !== null) {
2889
- explodedDate = explodeDate(dateObject);
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 (date === null || !isDateValid(date)) {
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?.month,
2922
+ placeholder: placeholders.month,
2932
2923
  items: monthOptions,
2933
2924
  size: size,
2934
- value: monthOptions.find(item => item.value === month)?.value,
2935
- renderValue: selectedValue => /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContent, {
2936
- title: getMonthNames(locale, monthFormat)[selectedValue]
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
- [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].forEach(index => {
2938
+ const months = getMonthNames(locale, monthFormat);
2939
+ months.forEach((label, index) => {
2946
2940
  options.push({
2947
2941
  type: 'option',
2948
- value: index
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 && newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
2957
+ if (newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
2961
2958
  broadcastNewValue(newValue);
2962
2959
  }
2963
- } else if (newDay && newMonth !== null && newMonth >= 0 && newYear && (newDay !== day || newMonth !== month || newYear !== year)) {
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(parseInt(event.target.value), month, year);
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 === null) {
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 && checkedDay !== day) {
2986
- setDay(checkedDay);
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, parseInt(newValue));
2998
- if (day && checkedDay !== day) {
2999
- setDay(checkedDay);
2996
+ } = checkDate(day, month, newValue);
2997
+ if (day) {
2998
+ if (checkedDay !== day) {
2999
+ setDay(checkedDay);
3000
+ }
3000
3001
  }
3001
- setYear(parseInt(slicedYear));
3002
- handleInternalValue(checkedDay, month, parseInt(slicedYear));
3002
+ setYear(slicedYear);
3003
+ handleInternalValue(checkedDay, month, slicedYear);
3003
3004
  } else {
3004
- setYear(parseInt(slicedYear));
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
- if (newValue === INITIAL_DEFAULT_STATE) {
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 ? newMonth + 1 : 1, 0).getDate();
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 && newDay > 31) {
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
- role: "group" // Add role attribute to indicate container for interactive elements
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.isRequired,
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
- type,
4553
- showMediaCircleInList,
4554
- isContainerAligned,
4555
- size
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 /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
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$1;
15450
+ exports.Decision = Decision;
15542
15451
  exports.DefinitionList = DefinitionList$1;
15543
15452
  exports.Dimmer = Dimmer$1;
15544
15453
  exports.DirectionProvider = DirectionProvider;