carbon-react 144.5.0 → 144.6.0

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 (17) hide show
  1. package/esm/components/date/__internal__/date-formats/index.d.ts +1 -1
  2. package/esm/components/date/__internal__/date-formats/index.js +25 -1
  3. package/esm/components/date/date.component.d.ts +2 -0
  4. package/esm/components/date/date.component.js +4 -2
  5. package/esm/components/date-range/date-range.component.d.ts +2 -0
  6. package/esm/components/date-range/date-range.component.js +3 -2
  7. package/esm/locales/en-gb.js +2 -1
  8. package/esm/locales/locale.d.ts +1 -0
  9. package/lib/components/date/__internal__/date-formats/index.d.ts +1 -1
  10. package/lib/components/date/__internal__/date-formats/index.js +25 -1
  11. package/lib/components/date/date.component.d.ts +2 -0
  12. package/lib/components/date/date.component.js +4 -2
  13. package/lib/components/date-range/date-range.component.d.ts +2 -0
  14. package/lib/components/date-range/date-range.component.js +3 -2
  15. package/lib/locales/en-gb.js +2 -1
  16. package/lib/locales/locale.d.ts +1 -0
  17. package/package.json +1 -1
package/esm/components/date/__internal__/date-formats/index.d.ts CHANGED
@@ -3,5 +3,5 @@ interface LocaleFormats {
3
3
  formats: string[];
4
4
  format: string;
5
5
  }
6
- declare const getFormatData: ({ code }: DateFnsLocale) => LocaleFormats;
6
+ declare const getFormatData: ({ code }: DateFnsLocale, dateFormatOverride?: string) => LocaleFormats;
7
7
  export default getFormatData;
package/esm/components/date/__internal__/date-formats/index.js CHANGED
@@ -72,7 +72,31 @@ const getTrailingChar = format => {
72
72
  };
73
73
  const getFormatData = ({
74
74
  code = "en-GB"
75
- }) => {
75
+ }, dateFormatOverride) => {
76
+ if (dateFormatOverride) {
77
+ const {
78
+ format
79
+ } = getOutputFormatForLocale(code);
80
+ let formatFromLocale;
81
+ switch (code) {
82
+ case "en-CA":
83
+ case "en-US":
84
+ formatFromLocale = "MM/dd/yyyy";
85
+ break;
86
+ case "ar-EG":
87
+ case "en-ZA":
88
+ case "fr-CA":
89
+ formatFromLocale = "dd/MM/yyyy";
90
+ break;
91
+ default:
92
+ formatFromLocale = format;
93
+ }
94
+ const formatsForLocale = getInputFormatsArrayForLocale(formatFromLocale);
95
+ return {
96
+ format: dateFormatOverride,
97
+ formats: generateFormats(formatsForLocale, "/")
98
+ };
99
+ }
76
100
  if (["en-CA", "en-US"].includes(code)) {
77
101
  const format = "MM/dd/yyyy";
78
102
  const formats = getInputFormatsArrayForLocale(format);
package/esm/components/date/date.component.d.ts CHANGED
@@ -42,6 +42,8 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
42
42
  onPickerOpen?: () => void;
43
43
  /** Callback triggered when the picker is closed */
44
44
  onPickerClose?: () => void;
45
+ /** Date format string to be applied to the date inputs */
46
+ dateFormatOverride?: string;
45
47
  }
46
48
  export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
47
49
  export default DateInput;
package/esm/components/date/date.component.js CHANGED
@@ -52,12 +52,13 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
52
52
  const blockClose = useRef(false);
53
53
  const locale = useLocale();
54
54
  const {
55
- dateFnsLocale
55
+ dateFnsLocale,
56
+ dateFormatOverride
56
57
  } = locale.date;
57
58
  const {
58
59
  format,
59
60
  formats
60
- } = useMemo(() => getFormatData(dateFnsLocale()), [dateFnsLocale]);
61
+ } = useMemo(() => getFormatData(dateFnsLocale(), dateFormatOverride), [dateFnsLocale, dateFormatOverride]);
61
62
  const {
62
63
  inputRefMap,
63
64
  setInputRefMap
@@ -480,6 +481,7 @@ if (process.env.NODE_ENV !== "production") {
480
481
  "data-element": PropTypes.string,
481
482
  "data-role": PropTypes.string,
482
483
  "datatype": PropTypes.string,
484
+ "dateFormatOverride": PropTypes.string,
483
485
  "defaultChecked": PropTypes.bool,
484
486
  "defaultValue": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),
485
487
  "dir": PropTypes.string,
package/esm/components/date-range/date-range.component.d.ts CHANGED
@@ -85,6 +85,8 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
85
85
  required?: boolean;
86
86
  /** Flag to configure component as optional. */
87
87
  isOptional?: boolean;
88
+ /** Date format string to be applied to the date inputs */
89
+ dateFormatOverride?: string;
88
90
  }
89
91
  export declare const DateRange: {
90
92
  ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, ...rest }: DateRangeProps): React.JSX.Element;
package/esm/components/date-range/date-range.component.js CHANGED
@@ -35,11 +35,12 @@ export const DateRange = ({
35
35
  const labelsInlineWithNewValidation = validationRedesignOptIn ? false : labelsInline;
36
36
  const l = useLocale();
37
37
  const {
38
- dateFnsLocale
38
+ dateFnsLocale,
39
+ dateFormatOverride
39
40
  } = l.date;
40
41
  const {
41
42
  format
42
- } = useMemo(() => getFormatData(dateFnsLocale()), [dateFnsLocale]);
43
+ } = useMemo(() => getFormatData(dateFnsLocale(), dateFormatOverride), [dateFnsLocale, dateFormatOverride]);
43
44
  const inlineLabelWidth = 40;
44
45
  const [lastChangedDate, setLastChangedDate] = useState("");
45
46
  const computedValue = useCallback(valueString => {
package/esm/locales/en-gb.js CHANGED
@@ -34,7 +34,8 @@ const enGB = {
34
34
  ariaLabels: {
35
35
  previousMonthButton: () => "Previous month",
36
36
  nextMonthButton: () => "Next month"
37
- }
37
+ },
38
+ dateFormatOverride: undefined
38
39
  },
39
40
  dialog: {
40
41
  ariaLabels: {
package/esm/locales/locale.d.ts CHANGED
@@ -34,6 +34,7 @@ interface Locale {
34
34
  previousMonthButton: () => string;
35
35
  nextMonthButton: () => string;
36
36
  };
37
+ dateFormatOverride?: string;
37
38
  };
38
39
  dialog: {
39
40
  ariaLabels: {
package/lib/components/date/__internal__/date-formats/index.d.ts CHANGED
@@ -3,5 +3,5 @@ interface LocaleFormats {
3
3
  formats: string[];
4
4
  format: string;
5
5
  }
6
- declare const getFormatData: ({ code }: DateFnsLocale) => LocaleFormats;
6
+ declare const getFormatData: ({ code }: DateFnsLocale, dateFormatOverride?: string) => LocaleFormats;
7
7
  export default getFormatData;
package/lib/components/date/__internal__/date-formats/index.js CHANGED
@@ -78,7 +78,31 @@ const getTrailingChar = format => {
78
78
  };
79
79
  const getFormatData = ({
80
80
  code = "en-GB"
81
- }) => {
81
+ }, dateFormatOverride) => {
82
+ if (dateFormatOverride) {
83
+ const {
84
+ format
85
+ } = getOutputFormatForLocale(code);
86
+ let formatFromLocale;
87
+ switch (code) {
88
+ case "en-CA":
89
+ case "en-US":
90
+ formatFromLocale = "MM/dd/yyyy";
91
+ break;
92
+ case "ar-EG":
93
+ case "en-ZA":
94
+ case "fr-CA":
95
+ formatFromLocale = "dd/MM/yyyy";
96
+ break;
97
+ default:
98
+ formatFromLocale = format;
99
+ }
100
+ const formatsForLocale = getInputFormatsArrayForLocale(formatFromLocale);
101
+ return {
102
+ format: dateFormatOverride,
103
+ formats: generateFormats(formatsForLocale, "/")
104
+ };
105
+ }
82
106
  if (["en-CA", "en-US"].includes(code)) {
83
107
  const format = "MM/dd/yyyy";
84
108
  const formats = getInputFormatsArrayForLocale(format);
package/lib/components/date/date.component.d.ts CHANGED
@@ -42,6 +42,8 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
42
42
  onPickerOpen?: () => void;
43
43
  /** Callback triggered when the picker is closed */
44
44
  onPickerClose?: () => void;
45
+ /** Date format string to be applied to the date inputs */
46
+ dateFormatOverride?: string;
45
47
  }
46
48
  export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
47
49
  export default DateInput;
package/lib/components/date/date.component.js CHANGED
@@ -61,12 +61,13 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
61
61
  const blockClose = (0, _react.useRef)(false);
62
62
  const locale = (0, _useLocale.default)();
63
63
  const {
64
- dateFnsLocale
64
+ dateFnsLocale,
65
+ dateFormatOverride
65
66
  } = locale.date;
66
67
  const {
67
68
  format,
68
69
  formats
69
- } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale()), [dateFnsLocale]);
70
+ } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale(), dateFormatOverride), [dateFnsLocale, dateFormatOverride]);
70
71
  const {
71
72
  inputRefMap,
72
73
  setInputRefMap
@@ -489,6 +490,7 @@ if (process.env.NODE_ENV !== "production") {
489
490
  "data-element": _propTypes.default.string,
490
491
  "data-role": _propTypes.default.string,
491
492
  "datatype": _propTypes.default.string,
493
+ "dateFormatOverride": _propTypes.default.string,
492
494
  "defaultChecked": _propTypes.default.bool,
493
495
  "defaultValue": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.number, _propTypes.default.string]),
494
496
  "dir": _propTypes.default.string,
package/lib/components/date-range/date-range.component.d.ts CHANGED
@@ -85,6 +85,8 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
85
85
  required?: boolean;
86
86
  /** Flag to configure component as optional. */
87
87
  isOptional?: boolean;
88
+ /** Date format string to be applied to the date inputs */
89
+ dateFormatOverride?: string;
88
90
  }
89
91
  export declare const DateRange: {
90
92
  ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, ...rest }: DateRangeProps): React.JSX.Element;
package/lib/components/date-range/date-range.component.js CHANGED
@@ -44,11 +44,12 @@ const DateRange = ({
44
44
  const labelsInlineWithNewValidation = validationRedesignOptIn ? false : labelsInline;
45
45
  const l = (0, _useLocale.default)();
46
46
  const {
47
- dateFnsLocale
47
+ dateFnsLocale,
48
+ dateFormatOverride
48
49
  } = l.date;
49
50
  const {
50
51
  format
51
- } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale()), [dateFnsLocale]);
52
+ } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale(), dateFormatOverride), [dateFnsLocale, dateFormatOverride]);
52
53
  const inlineLabelWidth = 40;
53
54
  const [lastChangedDate, setLastChangedDate] = (0, _react.useState)("");
54
55
  const computedValue = (0, _react.useCallback)(valueString => {
package/lib/locales/en-gb.js CHANGED
@@ -41,7 +41,8 @@ const enGB = {
41
41
  ariaLabels: {
42
42
  previousMonthButton: () => "Previous month",
43
43
  nextMonthButton: () => "Next month"
44
- }
44
+ },
45
+ dateFormatOverride: undefined
45
46
  },
46
47
  dialog: {
47
48
  ariaLabels: {
package/lib/locales/locale.d.ts CHANGED
@@ -34,6 +34,7 @@ interface Locale {
34
34
  previousMonthButton: () => string;
35
35
  nextMonthButton: () => string;
36
36
  };
37
+ dateFormatOverride?: string;
37
38
  };
38
39
  dialog: {
39
40
  ariaLabels: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "144.5.0",
3
+ "version": "144.6.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",