carbon-react 151.5.3 → 152.0.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.
- package/esm/components/date/__internal__/date-picker/date-picker.component.d.ts +5 -4
- package/esm/components/date/date.component.d.ts +1 -1
- package/esm/components/date/date.component.js +0 -11
- package/esm/components/numeral-date/index.d.ts +1 -1
- package/esm/components/numeral-date/numeral-date.component.d.ts +15 -19
- package/esm/components/numeral-date/numeral-date.component.js +10 -5
- package/lib/components/date/__internal__/date-picker/date-picker.component.d.ts +5 -4
- package/lib/components/date/date.component.d.ts +1 -1
- package/lib/components/date/date.component.js +0 -11
- package/lib/components/numeral-date/index.d.ts +1 -1
- package/lib/components/numeral-date/numeral-date.component.d.ts +15 -19
- package/lib/components/numeral-date/numeral-date.component.js +9 -5
- package/package.json +1 -1
|
@@ -3,10 +3,8 @@ import { DayPickerProps, Modifiers } from "react-day-picker";
|
|
|
3
3
|
declare type CustomRefObject<T> = {
|
|
4
4
|
current?: T | null;
|
|
5
5
|
};
|
|
6
|
-
export interface PickerProps extends Omit<DayPickerProps, "mode" | "
|
|
7
|
-
disabledDays?: NonNullable<Date> | NonNullable<Date>[] | undefined[];
|
|
6
|
+
export interface PickerProps extends Omit<DayPickerProps, "mode" | "modifiers"> {
|
|
8
7
|
modifiers?: Partial<Modifiers>;
|
|
9
|
-
selectedDays?: NonNullable<Date> | NonNullable<Date>[] | undefined[];
|
|
10
8
|
}
|
|
11
9
|
export interface DatePickerProps {
|
|
12
10
|
/** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
|
|
@@ -15,7 +13,10 @@ export interface DatePickerProps {
|
|
|
15
13
|
minDate?: string;
|
|
16
14
|
/** Maximum possible date YYYY-MM-DD */
|
|
17
15
|
maxDate?: string;
|
|
18
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* Pass any props that match the DayPickerProps interface to override default behaviors
|
|
18
|
+
* See [DayPickerProps](https://daypicker.dev/api/type-aliases/DayPickerProps) for a full list of available props
|
|
19
|
+
* */
|
|
19
20
|
pickerProps?: PickerProps;
|
|
20
21
|
/** Element that the DatePicker will be displayed under */
|
|
21
22
|
inputElement: CustomRefObject<HTMLElement>;
|
|
@@ -29,7 +29,7 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
|
|
|
29
29
|
value: string;
|
|
30
30
|
/**
|
|
31
31
|
* Pass any props that match the DayPickerProps interface to override default behaviors
|
|
32
|
-
* See [DayPickerProps](https://daypicker.dev/
|
|
32
|
+
* See [DayPickerProps](https://daypicker.dev/api/type-aliases/DayPickerProps) for a full list of available props
|
|
33
33
|
* */
|
|
34
34
|
pickerProps?: PickerProps;
|
|
35
35
|
/**
|
|
@@ -2,7 +2,6 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
2
2
|
import React, { useContext, useEffect, useMemo, useRef, useState, useCallback } from "react";
|
|
3
3
|
import { additionalYears, findMatchedFormatAndValue, formattedValue, formatToISO, isDateValid, parseDate, parseISODate, checkISOFormatAndLength, getSeparator, isValidLocaleDate } from "./__internal__/utils";
|
|
4
4
|
import useLocale from "../../hooks/__internal__/useLocale";
|
|
5
|
-
import Logger from "../../__internal__/utils/logger";
|
|
6
5
|
import Events from "../../__internal__/utils/helpers/events";
|
|
7
6
|
import { filterOutStyledSystemSpacingProps } from "../../style/utils";
|
|
8
7
|
import getFormatData from "./__internal__/date-formats";
|
|
@@ -14,8 +13,6 @@ import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener"
|
|
|
14
13
|
import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
|
|
15
14
|
import guid from "../../__internal__/utils/helpers/guid";
|
|
16
15
|
import tagComponent from "../../__internal__/utils/helpers/tags/tags";
|
|
17
|
-
let deprecateDisabledDaysWarnTriggered = false;
|
|
18
|
-
let deprecateSelectedDaysWarnTriggered = false;
|
|
19
16
|
export const DateInput = /*#__PURE__*/React.forwardRef(({
|
|
20
17
|
adaptiveLabelBreakpoint,
|
|
21
18
|
allowEmptyValue,
|
|
@@ -48,14 +45,6 @@ export const DateInput = /*#__PURE__*/React.forwardRef(({
|
|
|
48
45
|
datePickerAriaLabelledBy,
|
|
49
46
|
...rest
|
|
50
47
|
}, ref) => {
|
|
51
|
-
if (!deprecateDisabledDaysWarnTriggered && pickerProps?.disabledDays) {
|
|
52
|
-
deprecateDisabledDaysWarnTriggered = true;
|
|
53
|
-
Logger.deprecate('The `disabledDays` prop has been deprecated as it is currently no longer available in `DayPickerProps` from "react-day-picker".' + "Please use the `disabled` prop instead.");
|
|
54
|
-
}
|
|
55
|
-
if (!deprecateSelectedDaysWarnTriggered && pickerProps?.selectedDays) {
|
|
56
|
-
deprecateSelectedDaysWarnTriggered = true;
|
|
57
|
-
Logger.deprecate('The `selectedDays` prop has been deprecated as it is currently no longer available in `DayPickerProps` from "react-day-picker".' + "Please use the `selected` prop instead.");
|
|
58
|
-
}
|
|
59
48
|
const wrapperRef = useRef(null);
|
|
60
49
|
const parentRef = useRef(null);
|
|
61
50
|
const internalInputRef = useRef(null);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default } from "./numeral-date.component";
|
|
2
|
-
export type { NumeralDateProps } from "./numeral-date.component";
|
|
2
|
+
export type { NumeralDateProps, NumeralDateHandle, } from "./numeral-date.component";
|
|
@@ -3,26 +3,19 @@ import { MarginProps } from "styled-system";
|
|
|
3
3
|
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
4
4
|
import { ValidationProps } from "../../__internal__/validations";
|
|
5
5
|
export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["yyyy", "mm", "dd"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
|
|
6
|
-
export interface
|
|
7
|
-
dd
|
|
8
|
-
mm
|
|
6
|
+
export interface NumeralDateValue {
|
|
7
|
+
dd?: string;
|
|
8
|
+
mm?: string;
|
|
9
|
+
yyyy?: string;
|
|
9
10
|
}
|
|
10
|
-
export interface
|
|
11
|
-
mm: string;
|
|
12
|
-
yyyy: string;
|
|
13
|
-
}
|
|
14
|
-
export interface FullDate extends DayMonthDate {
|
|
15
|
-
yyyy: string;
|
|
16
|
-
}
|
|
17
|
-
export declare type NumeralDateObject = DayMonthDate | MonthYearDate | FullDate;
|
|
18
|
-
export interface NumeralDateEvent<DateType extends NumeralDateObject = FullDate> {
|
|
11
|
+
export interface NumeralDateEvent {
|
|
19
12
|
target: {
|
|
20
13
|
name?: string;
|
|
21
14
|
id: string;
|
|
22
|
-
value:
|
|
15
|
+
value: NumeralDateValue;
|
|
23
16
|
};
|
|
24
17
|
}
|
|
25
|
-
export interface NumeralDateProps
|
|
18
|
+
export interface NumeralDateProps extends ValidationProps, MarginProps, TagProps {
|
|
26
19
|
/** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
|
|
27
20
|
adaptiveLabelBreakpoint?: number;
|
|
28
21
|
/** If true, the component will be disabled */
|
|
@@ -31,9 +24,9 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
|
|
|
31
24
|
readOnly?: boolean;
|
|
32
25
|
dateFormat?: ValidDateFormat;
|
|
33
26
|
/** Default value for use in uncontrolled mode */
|
|
34
|
-
defaultValue?:
|
|
27
|
+
defaultValue?: NumeralDateValue;
|
|
35
28
|
/** Value for use in controlled mode */
|
|
36
|
-
value?:
|
|
29
|
+
value?: NumeralDateValue;
|
|
37
30
|
/** When true, enables the internal errors to be displayed */
|
|
38
31
|
enableInternalError?: boolean;
|
|
39
32
|
/** When true, enables the internal warnings to be displayed */
|
|
@@ -62,9 +55,9 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
|
|
|
62
55
|
/** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
|
|
63
56
|
labelSpacing?: 1 | 2;
|
|
64
57
|
/** Blur event handler */
|
|
65
|
-
onBlur?: (ev: NumeralDateEvent
|
|
58
|
+
onBlur?: (ev: NumeralDateEvent) => void;
|
|
66
59
|
/** Change event handler */
|
|
67
|
-
onChange?: (ev: NumeralDateEvent
|
|
60
|
+
onChange?: (ev: NumeralDateEvent) => void;
|
|
68
61
|
/** Flag to configure component as mandatory */
|
|
69
62
|
required?: boolean;
|
|
70
63
|
/** Size of an input */
|
|
@@ -91,5 +84,8 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
|
|
|
91
84
|
isOptional?: boolean;
|
|
92
85
|
}
|
|
93
86
|
export declare type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
|
|
94
|
-
export declare
|
|
87
|
+
export declare type NumeralDateHandle = {
|
|
88
|
+
focus: () => void;
|
|
89
|
+
} | null;
|
|
90
|
+
export declare const NumeralDate: React.ForwardRefExoticComponent<NumeralDateProps & React.RefAttributes<NumeralDateHandle>>;
|
|
95
91
|
export default NumeralDate;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
-
import React, { useContext, useState, useEffect, useRef, useMemo } from "react";
|
|
2
|
+
import React, { useContext, useState, useEffect, useRef, useMemo, forwardRef, useImperativeHandle } from "react";
|
|
3
3
|
import invariant from "invariant";
|
|
4
4
|
import tagComponent from "../../__internal__/utils/helpers/tags";
|
|
5
5
|
import { filterStyledSystemMarginProps } from "../../style/utils";
|
|
@@ -78,7 +78,7 @@ const getDateLabel = (datePart, locale) => {
|
|
|
78
78
|
return locale.numeralDate.labels.day();
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
|
-
export const NumeralDate = ({
|
|
81
|
+
export const NumeralDate = /*#__PURE__*/forwardRef(({
|
|
82
82
|
dateFormat = ["dd", "mm", "yyyy"],
|
|
83
83
|
defaultValue,
|
|
84
84
|
disabled,
|
|
@@ -112,7 +112,7 @@ export const NumeralDate = ({
|
|
|
112
112
|
monthRef,
|
|
113
113
|
yearRef,
|
|
114
114
|
...rest
|
|
115
|
-
}) => {
|
|
115
|
+
}, ref) => {
|
|
116
116
|
const locale = useLocale();
|
|
117
117
|
const {
|
|
118
118
|
validationRedesignOptIn
|
|
@@ -129,6 +129,11 @@ export const NumeralDate = ({
|
|
|
129
129
|
const isControlled = useRef(value !== undefined);
|
|
130
130
|
const initialValue = isControlled.current ? value : defaultValue;
|
|
131
131
|
const refs = useRef(dateFormat.map(() => null));
|
|
132
|
+
useImperativeHandle(ref, () => ({
|
|
133
|
+
focus: () => {
|
|
134
|
+
refs.current[0]?.focus();
|
|
135
|
+
}
|
|
136
|
+
}));
|
|
132
137
|
const [internalMessages, setInternalMessages] = useState({
|
|
133
138
|
...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
|
|
134
139
|
});
|
|
@@ -184,7 +189,7 @@ export const NumeralDate = ({
|
|
|
184
189
|
}));
|
|
185
190
|
}
|
|
186
191
|
setTimeout(() => {
|
|
187
|
-
const hasBlurred = !refs.current.find(
|
|
192
|
+
const hasBlurred = !refs.current.find(r => r === document.activeElement);
|
|
188
193
|
/* istanbul ignore else */
|
|
189
194
|
if (onBlur && hasBlurred) {
|
|
190
195
|
onBlur(createCustomEventObject(dateValue));
|
|
@@ -341,5 +346,5 @@ export const NumeralDate = ({
|
|
|
341
346
|
}), /*#__PURE__*/React.createElement(ErrorBorder, {
|
|
342
347
|
warning: !!(!internalError && internalWarning)
|
|
343
348
|
})), renderInputs()));
|
|
344
|
-
};
|
|
349
|
+
});
|
|
345
350
|
export default NumeralDate;
|
|
@@ -3,10 +3,8 @@ import { DayPickerProps, Modifiers } from "react-day-picker";
|
|
|
3
3
|
declare type CustomRefObject<T> = {
|
|
4
4
|
current?: T | null;
|
|
5
5
|
};
|
|
6
|
-
export interface PickerProps extends Omit<DayPickerProps, "mode" | "
|
|
7
|
-
disabledDays?: NonNullable<Date> | NonNullable<Date>[] | undefined[];
|
|
6
|
+
export interface PickerProps extends Omit<DayPickerProps, "mode" | "modifiers"> {
|
|
8
7
|
modifiers?: Partial<Modifiers>;
|
|
9
|
-
selectedDays?: NonNullable<Date> | NonNullable<Date>[] | undefined[];
|
|
10
8
|
}
|
|
11
9
|
export interface DatePickerProps {
|
|
12
10
|
/** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
|
|
@@ -15,7 +13,10 @@ export interface DatePickerProps {
|
|
|
15
13
|
minDate?: string;
|
|
16
14
|
/** Maximum possible date YYYY-MM-DD */
|
|
17
15
|
maxDate?: string;
|
|
18
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* Pass any props that match the DayPickerProps interface to override default behaviors
|
|
18
|
+
* See [DayPickerProps](https://daypicker.dev/api/type-aliases/DayPickerProps) for a full list of available props
|
|
19
|
+
* */
|
|
19
20
|
pickerProps?: PickerProps;
|
|
20
21
|
/** Element that the DatePicker will be displayed under */
|
|
21
22
|
inputElement: CustomRefObject<HTMLElement>;
|
|
@@ -29,7 +29,7 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
|
|
|
29
29
|
value: string;
|
|
30
30
|
/**
|
|
31
31
|
* Pass any props that match the DayPickerProps interface to override default behaviors
|
|
32
|
-
* See [DayPickerProps](https://daypicker.dev/
|
|
32
|
+
* See [DayPickerProps](https://daypicker.dev/api/type-aliases/DayPickerProps) for a full list of available props
|
|
33
33
|
* */
|
|
34
34
|
pickerProps?: PickerProps;
|
|
35
35
|
/**
|
|
@@ -7,7 +7,6 @@ exports.default = exports.DateInput = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _utils = require("./__internal__/utils");
|
|
9
9
|
var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
|
|
10
|
-
var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
|
|
11
10
|
var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
|
|
12
11
|
var _utils2 = require("../../style/utils");
|
|
13
12
|
var _dateFormats = _interopRequireDefault(require("./__internal__/date-formats"));
|
|
@@ -23,8 +22,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
23
22
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
24
23
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
25
24
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
26
|
-
let deprecateDisabledDaysWarnTriggered = false;
|
|
27
|
-
let deprecateSelectedDaysWarnTriggered = false;
|
|
28
25
|
const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
|
|
29
26
|
adaptiveLabelBreakpoint,
|
|
30
27
|
allowEmptyValue,
|
|
@@ -57,14 +54,6 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
57
54
|
datePickerAriaLabelledBy,
|
|
58
55
|
...rest
|
|
59
56
|
}, ref) => {
|
|
60
|
-
if (!deprecateDisabledDaysWarnTriggered && pickerProps?.disabledDays) {
|
|
61
|
-
deprecateDisabledDaysWarnTriggered = true;
|
|
62
|
-
_logger.default.deprecate('The `disabledDays` prop has been deprecated as it is currently no longer available in `DayPickerProps` from "react-day-picker".' + "Please use the `disabled` prop instead.");
|
|
63
|
-
}
|
|
64
|
-
if (!deprecateSelectedDaysWarnTriggered && pickerProps?.selectedDays) {
|
|
65
|
-
deprecateSelectedDaysWarnTriggered = true;
|
|
66
|
-
_logger.default.deprecate('The `selectedDays` prop has been deprecated as it is currently no longer available in `DayPickerProps` from "react-day-picker".' + "Please use the `selected` prop instead.");
|
|
67
|
-
}
|
|
68
57
|
const wrapperRef = (0, _react.useRef)(null);
|
|
69
58
|
const parentRef = (0, _react.useRef)(null);
|
|
70
59
|
const internalInputRef = (0, _react.useRef)(null);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default } from "./numeral-date.component";
|
|
2
|
-
export type { NumeralDateProps } from "./numeral-date.component";
|
|
2
|
+
export type { NumeralDateProps, NumeralDateHandle, } from "./numeral-date.component";
|
|
@@ -3,26 +3,19 @@ import { MarginProps } from "styled-system";
|
|
|
3
3
|
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
4
4
|
import { ValidationProps } from "../../__internal__/validations";
|
|
5
5
|
export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["yyyy", "mm", "dd"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
|
|
6
|
-
export interface
|
|
7
|
-
dd
|
|
8
|
-
mm
|
|
6
|
+
export interface NumeralDateValue {
|
|
7
|
+
dd?: string;
|
|
8
|
+
mm?: string;
|
|
9
|
+
yyyy?: string;
|
|
9
10
|
}
|
|
10
|
-
export interface
|
|
11
|
-
mm: string;
|
|
12
|
-
yyyy: string;
|
|
13
|
-
}
|
|
14
|
-
export interface FullDate extends DayMonthDate {
|
|
15
|
-
yyyy: string;
|
|
16
|
-
}
|
|
17
|
-
export declare type NumeralDateObject = DayMonthDate | MonthYearDate | FullDate;
|
|
18
|
-
export interface NumeralDateEvent<DateType extends NumeralDateObject = FullDate> {
|
|
11
|
+
export interface NumeralDateEvent {
|
|
19
12
|
target: {
|
|
20
13
|
name?: string;
|
|
21
14
|
id: string;
|
|
22
|
-
value:
|
|
15
|
+
value: NumeralDateValue;
|
|
23
16
|
};
|
|
24
17
|
}
|
|
25
|
-
export interface NumeralDateProps
|
|
18
|
+
export interface NumeralDateProps extends ValidationProps, MarginProps, TagProps {
|
|
26
19
|
/** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
|
|
27
20
|
adaptiveLabelBreakpoint?: number;
|
|
28
21
|
/** If true, the component will be disabled */
|
|
@@ -31,9 +24,9 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
|
|
|
31
24
|
readOnly?: boolean;
|
|
32
25
|
dateFormat?: ValidDateFormat;
|
|
33
26
|
/** Default value for use in uncontrolled mode */
|
|
34
|
-
defaultValue?:
|
|
27
|
+
defaultValue?: NumeralDateValue;
|
|
35
28
|
/** Value for use in controlled mode */
|
|
36
|
-
value?:
|
|
29
|
+
value?: NumeralDateValue;
|
|
37
30
|
/** When true, enables the internal errors to be displayed */
|
|
38
31
|
enableInternalError?: boolean;
|
|
39
32
|
/** When true, enables the internal warnings to be displayed */
|
|
@@ -62,9 +55,9 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
|
|
|
62
55
|
/** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
|
|
63
56
|
labelSpacing?: 1 | 2;
|
|
64
57
|
/** Blur event handler */
|
|
65
|
-
onBlur?: (ev: NumeralDateEvent
|
|
58
|
+
onBlur?: (ev: NumeralDateEvent) => void;
|
|
66
59
|
/** Change event handler */
|
|
67
|
-
onChange?: (ev: NumeralDateEvent
|
|
60
|
+
onChange?: (ev: NumeralDateEvent) => void;
|
|
68
61
|
/** Flag to configure component as mandatory */
|
|
69
62
|
required?: boolean;
|
|
70
63
|
/** Size of an input */
|
|
@@ -91,5 +84,8 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
|
|
|
91
84
|
isOptional?: boolean;
|
|
92
85
|
}
|
|
93
86
|
export declare type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
|
|
94
|
-
export declare
|
|
87
|
+
export declare type NumeralDateHandle = {
|
|
88
|
+
focus: () => void;
|
|
89
|
+
} | null;
|
|
90
|
+
export declare const NumeralDate: React.ForwardRefExoticComponent<NumeralDateProps & React.RefAttributes<NumeralDateHandle>>;
|
|
95
91
|
export default NumeralDate;
|
|
@@ -87,7 +87,7 @@ const getDateLabel = (datePart, locale) => {
|
|
|
87
87
|
return locale.numeralDate.labels.day();
|
|
88
88
|
}
|
|
89
89
|
};
|
|
90
|
-
const NumeralDate = ({
|
|
90
|
+
const NumeralDate = exports.NumeralDate = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
91
91
|
dateFormat = ["dd", "mm", "yyyy"],
|
|
92
92
|
defaultValue,
|
|
93
93
|
disabled,
|
|
@@ -121,7 +121,7 @@ const NumeralDate = ({
|
|
|
121
121
|
monthRef,
|
|
122
122
|
yearRef,
|
|
123
123
|
...rest
|
|
124
|
-
}) => {
|
|
124
|
+
}, ref) => {
|
|
125
125
|
const locale = (0, _useLocale.default)();
|
|
126
126
|
const {
|
|
127
127
|
validationRedesignOptIn
|
|
@@ -138,6 +138,11 @@ const NumeralDate = ({
|
|
|
138
138
|
const isControlled = (0, _react.useRef)(value !== undefined);
|
|
139
139
|
const initialValue = isControlled.current ? value : defaultValue;
|
|
140
140
|
const refs = (0, _react.useRef)(dateFormat.map(() => null));
|
|
141
|
+
(0, _react.useImperativeHandle)(ref, () => ({
|
|
142
|
+
focus: () => {
|
|
143
|
+
refs.current[0]?.focus();
|
|
144
|
+
}
|
|
145
|
+
}));
|
|
141
146
|
const [internalMessages, setInternalMessages] = (0, _react.useState)({
|
|
142
147
|
...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
|
|
143
148
|
});
|
|
@@ -193,7 +198,7 @@ const NumeralDate = ({
|
|
|
193
198
|
}));
|
|
194
199
|
}
|
|
195
200
|
setTimeout(() => {
|
|
196
|
-
const hasBlurred = !refs.current.find(
|
|
201
|
+
const hasBlurred = !refs.current.find(r => r === document.activeElement);
|
|
197
202
|
/* istanbul ignore else */
|
|
198
203
|
if (onBlur && hasBlurred) {
|
|
199
204
|
onBlur(createCustomEventObject(dateValue));
|
|
@@ -350,6 +355,5 @@ const NumeralDate = ({
|
|
|
350
355
|
}), /*#__PURE__*/_react.default.createElement(_textbox2.default, {
|
|
351
356
|
warning: !!(!internalError && internalWarning)
|
|
352
357
|
})), renderInputs()));
|
|
353
|
-
};
|
|
354
|
-
exports.NumeralDate = NumeralDate;
|
|
358
|
+
});
|
|
355
359
|
var _default = exports.default = NumeralDate;
|