carbon-react 147.8.1 → 147.9.1
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/__internal__/fieldset/fieldset.component.js +9 -4
- package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts +6 -1
- package/esm/components/checkbox/checkbox-group/checkbox-group.component.js +47 -25
- package/esm/components/numeral-date/numeral-date.component.js +1 -1
- package/esm/components/radio-button/radio-button-group/radio-button-group.component.d.ts +7 -2
- package/esm/components/radio-button/radio-button-group/radio-button-group.component.js +56 -36
- package/esm/components/textarea/textarea.component.d.ts +2 -2
- package/esm/components/time/time.component.d.ts +3 -1
- package/esm/components/time/time.component.js +26 -4
- package/lib/__internal__/fieldset/fieldset.component.js +9 -4
- package/lib/components/checkbox/checkbox-group/checkbox-group.component.d.ts +6 -1
- package/lib/components/checkbox/checkbox-group/checkbox-group.component.js +46 -24
- package/lib/components/numeral-date/numeral-date.component.js +1 -1
- package/lib/components/radio-button/radio-button-group/radio-button-group.component.d.ts +7 -2
- package/lib/components/radio-button/radio-button-group/radio-button-group.component.js +55 -35
- package/lib/components/textarea/textarea.component.d.ts +2 -2
- package/lib/components/time/time.component.d.ts +3 -1
- package/lib/components/time/time.component.js +26 -4
- package/package.json +4 -9
- package/scripts/check_rfcs/check_rfcs.js +0 -70
- package/scripts/check_rfcs/index.js +0 -3
|
@@ -7,6 +7,7 @@ import NewValidationContext from "../../components/carbon-provider/__internal__/
|
|
|
7
7
|
import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
|
|
8
8
|
import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
|
|
9
9
|
import Help from "../../components/help";
|
|
10
|
+
import Typography from "../../components/typography";
|
|
10
11
|
const Fieldset = ({
|
|
11
12
|
legend,
|
|
12
13
|
children,
|
|
@@ -41,12 +42,13 @@ const Fieldset = ({
|
|
|
41
42
|
}, [ref, isRequired]);
|
|
42
43
|
const tooltipIcon = () => {
|
|
43
44
|
if (error || warning || info) {
|
|
44
|
-
return /*#__PURE__*/React.createElement(StyledIconWrapper,
|
|
45
|
+
return /*#__PURE__*/React.createElement(StyledIconWrapper, {
|
|
46
|
+
"aria-hidden": "true"
|
|
47
|
+
}, /*#__PURE__*/React.createElement(ValidationIcon, {
|
|
45
48
|
error: error,
|
|
46
49
|
warning: warning,
|
|
47
50
|
info: info,
|
|
48
|
-
tooltipFlipOverrides: ["top", "bottom"]
|
|
49
|
-
tooltipId: validationId
|
|
51
|
+
tooltipFlipOverrides: ["top", "bottom"]
|
|
50
52
|
}));
|
|
51
53
|
}
|
|
52
54
|
const helpProps = {
|
|
@@ -90,6 +92,9 @@ const Fieldset = ({
|
|
|
90
92
|
isRequired: isRequired,
|
|
91
93
|
isOptional: isOptional,
|
|
92
94
|
isDisabled: isDisabled
|
|
93
|
-
}, legend, !validationRedesignOptIn && tooltipIcon()))),
|
|
95
|
+
}, legend, !validationRedesignOptIn && tooltipIcon()))), !validationRedesignOptIn && /*#__PURE__*/React.createElement(Typography, {
|
|
96
|
+
screenReaderOnly: true,
|
|
97
|
+
id: validationId
|
|
98
|
+
}, error || warning || info), children));
|
|
94
99
|
};
|
|
95
100
|
export default Fieldset;
|
|
@@ -2,6 +2,11 @@ import React from "react";
|
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { ValidationProps } from "../../../__internal__/validations";
|
|
4
4
|
export interface CheckboxGroupProps extends ValidationProps, MarginProps {
|
|
5
|
+
/**
|
|
6
|
+
* Unique identifier for the component.
|
|
7
|
+
* Will use a randomly generated GUID if none is provided.
|
|
8
|
+
*/
|
|
9
|
+
id?: string;
|
|
5
10
|
/** The content for the CheckboxGroup Legend */
|
|
6
11
|
legend?: string;
|
|
7
12
|
/**
|
|
@@ -31,7 +36,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
|
|
|
31
36
|
inline?: boolean;
|
|
32
37
|
}
|
|
33
38
|
export declare const CheckboxGroup: {
|
|
34
|
-
(
|
|
39
|
+
({ children, legend, error, warning, info, required, isOptional, legendInline, legendWidth, legendAlign, legendSpacing, legendHelp, tooltipPosition, inline, id, ...rest }: CheckboxGroupProps): React.JSX.Element;
|
|
35
40
|
displayName: string;
|
|
36
41
|
};
|
|
37
42
|
export default CheckboxGroup;
|
|
@@ -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 } from "react";
|
|
2
|
+
import React, { useContext, useRef } from "react";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
4
|
import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
|
|
5
5
|
import StyledCheckboxGroup, { StyledHintText } from "./checkbox-group.style";
|
|
@@ -12,50 +12,69 @@ import ValidationMessage from "../../../__internal__/validation-message/validati
|
|
|
12
12
|
import Box from "../../box";
|
|
13
13
|
import { ErrorBorder } from "../../textbox/textbox.style";
|
|
14
14
|
import CheckboxGroupContext from "./__internal__/checkbox-group.context";
|
|
15
|
-
|
|
15
|
+
import guid from "../../../__internal__/utils/helpers/guid";
|
|
16
|
+
import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility";
|
|
17
|
+
export const CheckboxGroup = ({
|
|
18
|
+
children,
|
|
19
|
+
legend,
|
|
20
|
+
error,
|
|
21
|
+
warning,
|
|
22
|
+
info,
|
|
23
|
+
required,
|
|
24
|
+
isOptional,
|
|
25
|
+
legendInline,
|
|
26
|
+
legendWidth,
|
|
27
|
+
legendAlign = "left",
|
|
28
|
+
legendSpacing,
|
|
29
|
+
legendHelp,
|
|
30
|
+
tooltipPosition,
|
|
31
|
+
inline,
|
|
32
|
+
id,
|
|
33
|
+
...rest
|
|
34
|
+
}) => {
|
|
16
35
|
const {
|
|
17
36
|
validationRedesignOptIn
|
|
18
37
|
} = useContext(NewValidationContext);
|
|
38
|
+
const internalId = useRef(guid());
|
|
39
|
+
const uniqueId = id || internalId.current;
|
|
40
|
+
const inputHintId = legendHelp ? `${uniqueId}-hint` : undefined;
|
|
19
41
|
const {
|
|
20
|
-
|
|
21
|
-
|
|
42
|
+
validationId,
|
|
43
|
+
ariaDescribedBy
|
|
44
|
+
} = useInputAccessibility({
|
|
45
|
+
id: uniqueId,
|
|
46
|
+
validationRedesignOptIn: true,
|
|
22
47
|
error,
|
|
23
48
|
warning,
|
|
24
|
-
info
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
legendInline,
|
|
28
|
-
legendWidth,
|
|
29
|
-
legendAlign = "left",
|
|
30
|
-
legendSpacing,
|
|
31
|
-
legendHelp,
|
|
32
|
-
tooltipPosition,
|
|
33
|
-
inline
|
|
34
|
-
} = props;
|
|
49
|
+
info
|
|
50
|
+
});
|
|
51
|
+
const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId].filter(Boolean).join(" ");
|
|
35
52
|
return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(Fieldset, _extends({
|
|
53
|
+
id: uniqueId,
|
|
36
54
|
legend: legend,
|
|
37
|
-
inline: legendInline,
|
|
38
|
-
legendWidth: legendWidth,
|
|
39
55
|
legendAlign: legendAlign,
|
|
40
|
-
legendSpacing: legendSpacing,
|
|
41
56
|
error: error,
|
|
42
57
|
warning: warning,
|
|
43
58
|
isRequired: required,
|
|
44
59
|
isOptional: isOptional
|
|
45
|
-
},
|
|
60
|
+
}, combinedAriaDescribedBy && {
|
|
61
|
+
"aria-describedby": combinedAriaDescribedBy
|
|
62
|
+
}, tagComponent("checkboxgroup", rest), {
|
|
46
63
|
blockGroupBehaviour: !(error || warning)
|
|
47
|
-
}, filterStyledSystemMarginProps(
|
|
64
|
+
}, filterStyledSystemMarginProps(rest)), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, {
|
|
65
|
+
id: inputHintId
|
|
66
|
+
}, legendHelp), /*#__PURE__*/React.createElement(Box, {
|
|
48
67
|
position: "relative"
|
|
49
68
|
}, /*#__PURE__*/React.createElement(ValidationMessage, {
|
|
50
69
|
error: error,
|
|
51
|
-
warning: warning
|
|
70
|
+
warning: warning,
|
|
71
|
+
validationId: validationId
|
|
52
72
|
}), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
|
|
53
73
|
warning: !!(!error && warning),
|
|
54
74
|
inline: inline
|
|
55
75
|
}), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
|
|
56
76
|
"data-component": "checkbox-group",
|
|
57
77
|
"data-role": "checkbox-group",
|
|
58
|
-
legendInline: legendInline,
|
|
59
78
|
inline: inline
|
|
60
79
|
}, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
|
|
61
80
|
value: {
|
|
@@ -67,6 +86,7 @@ export const CheckboxGroup = props => {
|
|
|
67
86
|
}, children))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
|
|
68
87
|
tooltipPosition: tooltipPosition
|
|
69
88
|
}, /*#__PURE__*/React.createElement(Fieldset, _extends({
|
|
89
|
+
id: uniqueId,
|
|
70
90
|
legend: legend,
|
|
71
91
|
inline: legendInline,
|
|
72
92
|
legendWidth: legendWidth,
|
|
@@ -76,10 +96,12 @@ export const CheckboxGroup = props => {
|
|
|
76
96
|
warning: warning,
|
|
77
97
|
info: info,
|
|
78
98
|
isRequired: required,
|
|
79
|
-
isOptional: isOptional
|
|
80
|
-
|
|
99
|
+
isOptional: isOptional,
|
|
100
|
+
"aria-describedby": ariaDescribedBy,
|
|
101
|
+
validationId: validationId
|
|
102
|
+
}, tagComponent("checkboxgroup", rest), {
|
|
81
103
|
blockGroupBehaviour: !(error || warning || info)
|
|
82
|
-
}, filterStyledSystemMarginProps(
|
|
104
|
+
}, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
|
|
83
105
|
"data-component": "checkbox-group",
|
|
84
106
|
"data-role": "checkbox-group",
|
|
85
107
|
legendInline: legendInline
|
|
@@ -312,7 +312,7 @@ export const NumeralDate = ({
|
|
|
312
312
|
legendWidth: labelWidth,
|
|
313
313
|
legendSpacing: labelSpacing,
|
|
314
314
|
validationId: validationId,
|
|
315
|
-
"aria-describedby": ariaDescribedBy
|
|
315
|
+
"aria-describedby": validationOnLabel ? ariaDescribedBy : fieldHelpId
|
|
316
316
|
}, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Box, {
|
|
317
317
|
display: "flex",
|
|
318
318
|
flexDirection: "column",
|
|
@@ -2,6 +2,11 @@ import React from "react";
|
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { ValidationProps } from "../../../__internal__/validations";
|
|
4
4
|
export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
|
|
5
|
+
/**
|
|
6
|
+
* Unique identifier for the component.
|
|
7
|
+
* Will use a randomly generated GUID if none is provided.
|
|
8
|
+
*/
|
|
9
|
+
id?: string;
|
|
5
10
|
/** Breakpoint for adaptive legend (inline labels change to top aligned). Enables the adaptive behaviour when set */
|
|
6
11
|
adaptiveLegendBreakpoint?: number;
|
|
7
12
|
/** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
|
|
@@ -12,7 +17,7 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
|
|
|
12
17
|
inline?: boolean;
|
|
13
18
|
/** Spacing between labels and radio buttons, given number will be multiplied by base spacing unit (8) */
|
|
14
19
|
labelSpacing?: 1 | 2;
|
|
15
|
-
/** The content for the
|
|
20
|
+
/** The content for the RadioButtonGroup Legend */
|
|
16
21
|
legend?: string;
|
|
17
22
|
/**
|
|
18
23
|
* The content for the RadioButtonGroup hint text,
|
|
@@ -43,7 +48,7 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
|
|
|
43
48
|
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
44
49
|
}
|
|
45
50
|
export declare const RadioButtonGroup: {
|
|
46
|
-
(
|
|
51
|
+
({ children, id, name, legend, legendHelp, error, warning, info, onBlur, onChange, value, inline, legendInline, legendWidth, legendAlign, legendSpacing, labelSpacing, adaptiveLegendBreakpoint, adaptiveSpacingBreakpoint, required, isOptional, tooltipPosition, ...rest }: RadioButtonGroupProps): React.JSX.Element;
|
|
47
52
|
displayName: string;
|
|
48
53
|
};
|
|
49
54
|
export default RadioButtonGroup;
|
|
@@ -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 } from "react";
|
|
2
|
+
import React, { useContext, useRef } from "react";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
4
|
import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
|
|
5
5
|
import Fieldset from "../../../__internal__/fieldset";
|
|
@@ -13,43 +13,48 @@ import NewValidationContext from "../../carbon-provider/__internal__/new-validat
|
|
|
13
13
|
import ValidationMessage from "../../../__internal__/validation-message/validation-message.component";
|
|
14
14
|
import Box from "../../box";
|
|
15
15
|
import { ErrorBorder } from "../../textbox/textbox.style";
|
|
16
|
+
import guid from "../../../__internal__/utils/helpers/guid";
|
|
17
|
+
import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility";
|
|
16
18
|
let deprecateUncontrolledWarnTriggered = false;
|
|
17
|
-
export const RadioButtonGroup =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
19
|
+
export const RadioButtonGroup = ({
|
|
20
|
+
children,
|
|
21
|
+
id,
|
|
22
|
+
name,
|
|
23
|
+
legend,
|
|
24
|
+
legendHelp,
|
|
25
|
+
error,
|
|
26
|
+
warning,
|
|
27
|
+
info,
|
|
28
|
+
onBlur,
|
|
29
|
+
onChange,
|
|
30
|
+
value,
|
|
31
|
+
inline = false,
|
|
32
|
+
legendInline = false,
|
|
33
|
+
legendWidth,
|
|
34
|
+
legendAlign = "left",
|
|
35
|
+
legendSpacing,
|
|
36
|
+
labelSpacing = 1,
|
|
37
|
+
adaptiveLegendBreakpoint,
|
|
38
|
+
adaptiveSpacingBreakpoint,
|
|
39
|
+
required,
|
|
40
|
+
isOptional,
|
|
41
|
+
tooltipPosition,
|
|
42
|
+
...rest
|
|
43
|
+
}) => {
|
|
41
44
|
const {
|
|
42
45
|
validationRedesignOptIn
|
|
43
46
|
} = useContext(NewValidationContext);
|
|
44
|
-
const
|
|
47
|
+
const internalId = useRef(guid());
|
|
48
|
+
const uniqueId = id || internalId.current;
|
|
49
|
+
const inputHintId = legendHelp ? `${uniqueId}-hint` : undefined;
|
|
45
50
|
if (!deprecateUncontrolledWarnTriggered && !onChange) {
|
|
46
51
|
deprecateUncontrolledWarnTriggered = true;
|
|
47
52
|
Logger.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
|
|
48
53
|
}
|
|
49
|
-
const marginProps = filterStyledSystemMarginProps(
|
|
54
|
+
const marginProps = filterStyledSystemMarginProps(rest);
|
|
50
55
|
const isAboveLegendBreakpoint = useIsAboveBreakpoint(adaptiveLegendBreakpoint);
|
|
51
56
|
const isAboveSpacingBreakpoint = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
|
|
52
|
-
let inlineLegend =
|
|
57
|
+
let inlineLegend = legendInline;
|
|
53
58
|
if (adaptiveLegendBreakpoint) {
|
|
54
59
|
inlineLegend = !!isAboveLegendBreakpoint;
|
|
55
60
|
}
|
|
@@ -57,24 +62,37 @@ export const RadioButtonGroup = props => {
|
|
|
57
62
|
if (adaptiveSpacingBreakpoint && !isAboveSpacingBreakpoint) {
|
|
58
63
|
marginLeft = undefined;
|
|
59
64
|
}
|
|
65
|
+
const {
|
|
66
|
+
validationId,
|
|
67
|
+
ariaDescribedBy
|
|
68
|
+
} = useInputAccessibility({
|
|
69
|
+
id: uniqueId,
|
|
70
|
+
validationRedesignOptIn: true,
|
|
71
|
+
error,
|
|
72
|
+
warning,
|
|
73
|
+
info
|
|
74
|
+
});
|
|
75
|
+
const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId].filter(Boolean).join(" ");
|
|
60
76
|
return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(Fieldset, _extends({
|
|
61
77
|
legend: legend,
|
|
62
78
|
error: error,
|
|
63
79
|
warning: warning,
|
|
64
|
-
inline: inlineLegend,
|
|
65
|
-
legendWidth: legendWidth,
|
|
66
80
|
legendAlign: legendAlign,
|
|
67
|
-
legendSpacing: legendSpacing,
|
|
68
81
|
isRequired: required,
|
|
69
82
|
isOptional: isOptional
|
|
70
|
-
}, tagComponent("radiogroup",
|
|
83
|
+
}, tagComponent("radiogroup", rest), marginProps, {
|
|
71
84
|
ml: marginLeft,
|
|
72
85
|
blockGroupBehaviour: !(error || warning)
|
|
73
|
-
}
|
|
86
|
+
}, combinedAriaDescribedBy && {
|
|
87
|
+
"aria-describedby": combinedAriaDescribedBy
|
|
88
|
+
}), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, {
|
|
89
|
+
id: inputHintId
|
|
90
|
+
}, legendHelp), /*#__PURE__*/React.createElement(Box, {
|
|
74
91
|
position: "relative"
|
|
75
92
|
}, /*#__PURE__*/React.createElement(ValidationMessage, {
|
|
76
93
|
error: error,
|
|
77
|
-
warning: warning
|
|
94
|
+
warning: warning,
|
|
95
|
+
validationId: validationId
|
|
78
96
|
}), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
|
|
79
97
|
"data-role": "radio-error-border",
|
|
80
98
|
inline: inline,
|
|
@@ -113,9 +131,11 @@ export const RadioButtonGroup = props => {
|
|
|
113
131
|
legendSpacing: legendSpacing,
|
|
114
132
|
isRequired: required,
|
|
115
133
|
isOptional: isOptional
|
|
116
|
-
}, tagComponent("radiogroup",
|
|
134
|
+
}, tagComponent("radiogroup", rest), marginProps, {
|
|
117
135
|
ml: marginLeft,
|
|
118
|
-
blockGroupBehaviour: !(error || warning || info)
|
|
136
|
+
blockGroupBehaviour: !(error || warning || info),
|
|
137
|
+
"aria-describedby": ariaDescribedBy,
|
|
138
|
+
validationId: validationId
|
|
119
139
|
}), /*#__PURE__*/React.createElement(RadioButtonGroupStyle, {
|
|
120
140
|
"data-component": "radio-button-group",
|
|
121
141
|
role: "radiogroup",
|
|
@@ -84,7 +84,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
|
|
|
84
84
|
readOnly?: boolean;
|
|
85
85
|
/** Flag to configure component as optional */
|
|
86
86
|
isOptional?: boolean;
|
|
87
|
-
/** The number of visible text lines for the control */
|
|
87
|
+
/** The number of visible text lines for the control. When set, this determines the height of the textarea, and the minHeight property is ignored. */
|
|
88
88
|
rows?: number;
|
|
89
89
|
/** [Legacy] Overrides the default tooltip position */
|
|
90
90
|
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
@@ -102,7 +102,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
|
|
|
102
102
|
borderRadius?: BorderRadiusType | BorderRadiusType[];
|
|
103
103
|
/** Hides the borders for the component. Please note that validation and focus styling will still be applied */
|
|
104
104
|
hideBorders?: boolean;
|
|
105
|
-
/** Specify the minimum height */
|
|
105
|
+
/** Specify the minimum height. This property is only applied if rows is not set. */
|
|
106
106
|
minHeight?: number;
|
|
107
107
|
}
|
|
108
108
|
export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -9,6 +9,8 @@ export declare type TimeValue = {
|
|
|
9
9
|
hours: string;
|
|
10
10
|
minutes: string;
|
|
11
11
|
period?: ToggleValue;
|
|
12
|
+
formattedHours?: string;
|
|
13
|
+
formattedMinutes?: string;
|
|
12
14
|
};
|
|
13
15
|
export interface TimeInputEvent {
|
|
14
16
|
target: {
|
|
@@ -55,7 +57,7 @@ export interface TimeProps extends Omit<TagProps, "data-component">, MarginProps
|
|
|
55
57
|
/** Set a name value on the component */
|
|
56
58
|
name?: string;
|
|
57
59
|
/** Callback called when focus is lost on input elements */
|
|
58
|
-
onBlur?: (ev?: React.FocusEvent<HTMLInputElement
|
|
60
|
+
onBlur?: (ev?: React.FocusEvent<HTMLInputElement>, value?: TimeValue) => void;
|
|
59
61
|
/** Flag to configure component as mandatory */
|
|
60
62
|
required?: boolean;
|
|
61
63
|
/** Flag to configure component as optional */
|
|
@@ -55,7 +55,10 @@ const Time = /*#__PURE__*/React.forwardRef(({
|
|
|
55
55
|
minutes: minuteValue,
|
|
56
56
|
period: toggleValue
|
|
57
57
|
} = value;
|
|
58
|
+
const formattedHoursValue = hourValue.length ? hourValue.padStart(2, "0") : hourValue;
|
|
59
|
+
const formattedMinutesValue = minuteValue.length ? minuteValue.padStart(2, "0") : minuteValue;
|
|
58
60
|
const [inputValues, setInputValues] = useState([hourValue, minuteValue]);
|
|
61
|
+
const [formattedInputValues, setFormattedInputValues] = useState([formattedHoursValue, formattedMinutesValue]);
|
|
59
62
|
const locale = useLocale();
|
|
60
63
|
const showToggle = toggleValue !== undefined;
|
|
61
64
|
const [period, setPeriod] = useState(toggleValue);
|
|
@@ -104,6 +107,9 @@ const Time = /*#__PURE__*/React.forwardRef(({
|
|
|
104
107
|
const hours = inputName === "hrs" ? ev.target.value : inputValues[0];
|
|
105
108
|
const minutes = inputName === "mins" ? ev.target.value : inputValues[1];
|
|
106
109
|
setInputValues([hours, minutes]);
|
|
110
|
+
const formattedHours = hours.length ? hours.padStart(2, "0") : hours;
|
|
111
|
+
const formattedMinutes = minutes.length ? minutes.padStart(2, "0") : minutes;
|
|
112
|
+
setFormattedInputValues([formattedHours, formattedMinutes]);
|
|
107
113
|
onChange({
|
|
108
114
|
target: {
|
|
109
115
|
name,
|
|
@@ -111,13 +117,16 @@ const Time = /*#__PURE__*/React.forwardRef(({
|
|
|
111
117
|
value: {
|
|
112
118
|
hours,
|
|
113
119
|
minutes,
|
|
114
|
-
period
|
|
120
|
+
period,
|
|
121
|
+
formattedHours,
|
|
122
|
+
formattedMinutes
|
|
115
123
|
}
|
|
116
124
|
}
|
|
117
125
|
});
|
|
118
126
|
};
|
|
119
127
|
const handlePeriodChange = periodName => {
|
|
120
128
|
const [hours, minutes] = inputValues;
|
|
129
|
+
const [formattedHours, formattedMinutes] = formattedInputValues;
|
|
121
130
|
setPeriod(periodName);
|
|
122
131
|
onChange({
|
|
123
132
|
target: {
|
|
@@ -126,18 +135,29 @@ const Time = /*#__PURE__*/React.forwardRef(({
|
|
|
126
135
|
value: {
|
|
127
136
|
hours,
|
|
128
137
|
minutes,
|
|
129
|
-
period: periodName
|
|
138
|
+
period: periodName,
|
|
139
|
+
formattedHours,
|
|
140
|
+
formattedMinutes
|
|
130
141
|
}
|
|
131
142
|
}
|
|
132
143
|
});
|
|
133
144
|
};
|
|
134
145
|
const handleBlur = useCallback(ev => {
|
|
135
146
|
setTimeout(() => {
|
|
147
|
+
const [hours, minutes] = inputValues;
|
|
148
|
+
const [formattedHours, formattedMinutes] = formattedInputValues;
|
|
149
|
+
const timeValueObj = {
|
|
150
|
+
hours,
|
|
151
|
+
minutes,
|
|
152
|
+
period,
|
|
153
|
+
formattedHours,
|
|
154
|
+
formattedMinutes
|
|
155
|
+
};
|
|
136
156
|
if (hoursRef.current !== document.activeElement && minsRef.current !== document.activeElement) {
|
|
137
|
-
onBlur?.(ev);
|
|
157
|
+
onBlur?.(ev, timeValueObj);
|
|
138
158
|
}
|
|
139
159
|
});
|
|
140
|
-
}, [onBlur]);
|
|
160
|
+
}, [formattedInputValues, inputValues, onBlur, period]);
|
|
141
161
|
return /*#__PURE__*/React.createElement(Fieldset, _extends({
|
|
142
162
|
legend: label,
|
|
143
163
|
legendMargin: {
|
|
@@ -429,6 +449,8 @@ if (process.env.NODE_ENV !== "production") {
|
|
|
429
449
|
})
|
|
430
450
|
}),
|
|
431
451
|
"value": PropTypes.shape({
|
|
452
|
+
"formattedHours": PropTypes.string,
|
|
453
|
+
"formattedMinutes": PropTypes.string,
|
|
432
454
|
"hours": PropTypes.string.isRequired,
|
|
433
455
|
"minutes": PropTypes.string.isRequired,
|
|
434
456
|
"period": PropTypes.oneOf(["AM", "PM"])
|
|
@@ -12,6 +12,7 @@ var _newValidation = _interopRequireDefault(require("../../components/carbon-pro
|
|
|
12
12
|
var _inputBehaviour = require("../input-behaviour");
|
|
13
13
|
var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
|
|
14
14
|
var _help = _interopRequireDefault(require("../../components/help"));
|
|
15
|
+
var _typography = _interopRequireDefault(require("../../components/typography"));
|
|
15
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
17
|
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); }
|
|
17
18
|
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; }
|
|
@@ -50,12 +51,13 @@ const Fieldset = ({
|
|
|
50
51
|
}, [ref, isRequired]);
|
|
51
52
|
const tooltipIcon = () => {
|
|
52
53
|
if (error || warning || info) {
|
|
53
|
-
return /*#__PURE__*/_react.default.createElement(_fieldset.StyledIconWrapper,
|
|
54
|
+
return /*#__PURE__*/_react.default.createElement(_fieldset.StyledIconWrapper, {
|
|
55
|
+
"aria-hidden": "true"
|
|
56
|
+
}, /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
|
|
54
57
|
error: error,
|
|
55
58
|
warning: warning,
|
|
56
59
|
info: info,
|
|
57
|
-
tooltipFlipOverrides: ["top", "bottom"]
|
|
58
|
-
tooltipId: validationId
|
|
60
|
+
tooltipFlipOverrides: ["top", "bottom"]
|
|
59
61
|
}));
|
|
60
62
|
}
|
|
61
63
|
const helpProps = {
|
|
@@ -99,6 +101,9 @@ const Fieldset = ({
|
|
|
99
101
|
isRequired: isRequired,
|
|
100
102
|
isOptional: isOptional,
|
|
101
103
|
isDisabled: isDisabled
|
|
102
|
-
}, legend, !validationRedesignOptIn && tooltipIcon()))),
|
|
104
|
+
}, legend, !validationRedesignOptIn && tooltipIcon()))), !validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_typography.default, {
|
|
105
|
+
screenReaderOnly: true,
|
|
106
|
+
id: validationId
|
|
107
|
+
}, error || warning || info), children));
|
|
103
108
|
};
|
|
104
109
|
var _default = exports.default = Fieldset;
|
|
@@ -2,6 +2,11 @@ import React from "react";
|
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { ValidationProps } from "../../../__internal__/validations";
|
|
4
4
|
export interface CheckboxGroupProps extends ValidationProps, MarginProps {
|
|
5
|
+
/**
|
|
6
|
+
* Unique identifier for the component.
|
|
7
|
+
* Will use a randomly generated GUID if none is provided.
|
|
8
|
+
*/
|
|
9
|
+
id?: string;
|
|
5
10
|
/** The content for the CheckboxGroup Legend */
|
|
6
11
|
legend?: string;
|
|
7
12
|
/**
|
|
@@ -31,7 +36,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
|
|
|
31
36
|
inline?: boolean;
|
|
32
37
|
}
|
|
33
38
|
export declare const CheckboxGroup: {
|
|
34
|
-
(
|
|
39
|
+
({ children, legend, error, warning, info, required, isOptional, legendInline, legendWidth, legendAlign, legendSpacing, legendHelp, tooltipPosition, inline, id, ...rest }: CheckboxGroupProps): React.JSX.Element;
|
|
35
40
|
displayName: string;
|
|
36
41
|
};
|
|
37
42
|
export default CheckboxGroup;
|
|
@@ -17,54 +17,73 @@ var _validationMessage = _interopRequireDefault(require("../../../__internal__/v
|
|
|
17
17
|
var _box = _interopRequireDefault(require("../../box"));
|
|
18
18
|
var _textbox = require("../../textbox/textbox.style");
|
|
19
19
|
var _checkboxGroup2 = _interopRequireDefault(require("./__internal__/checkbox-group.context"));
|
|
20
|
+
var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
|
|
21
|
+
var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility"));
|
|
20
22
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
21
23
|
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); }
|
|
22
24
|
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; }
|
|
23
25
|
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); }
|
|
24
|
-
const CheckboxGroup =
|
|
26
|
+
const CheckboxGroup = ({
|
|
27
|
+
children,
|
|
28
|
+
legend,
|
|
29
|
+
error,
|
|
30
|
+
warning,
|
|
31
|
+
info,
|
|
32
|
+
required,
|
|
33
|
+
isOptional,
|
|
34
|
+
legendInline,
|
|
35
|
+
legendWidth,
|
|
36
|
+
legendAlign = "left",
|
|
37
|
+
legendSpacing,
|
|
38
|
+
legendHelp,
|
|
39
|
+
tooltipPosition,
|
|
40
|
+
inline,
|
|
41
|
+
id,
|
|
42
|
+
...rest
|
|
43
|
+
}) => {
|
|
25
44
|
const {
|
|
26
45
|
validationRedesignOptIn
|
|
27
46
|
} = (0, _react.useContext)(_newValidation.default);
|
|
47
|
+
const internalId = (0, _react.useRef)((0, _guid.default)());
|
|
48
|
+
const uniqueId = id || internalId.current;
|
|
49
|
+
const inputHintId = legendHelp ? `${uniqueId}-hint` : undefined;
|
|
28
50
|
const {
|
|
29
|
-
|
|
30
|
-
|
|
51
|
+
validationId,
|
|
52
|
+
ariaDescribedBy
|
|
53
|
+
} = (0, _useInputAccessibility.default)({
|
|
54
|
+
id: uniqueId,
|
|
55
|
+
validationRedesignOptIn: true,
|
|
31
56
|
error,
|
|
32
57
|
warning,
|
|
33
|
-
info
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
legendInline,
|
|
37
|
-
legendWidth,
|
|
38
|
-
legendAlign = "left",
|
|
39
|
-
legendSpacing,
|
|
40
|
-
legendHelp,
|
|
41
|
-
tooltipPosition,
|
|
42
|
-
inline
|
|
43
|
-
} = props;
|
|
58
|
+
info
|
|
59
|
+
});
|
|
60
|
+
const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId].filter(Boolean).join(" ");
|
|
44
61
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
|
|
62
|
+
id: uniqueId,
|
|
45
63
|
legend: legend,
|
|
46
|
-
inline: legendInline,
|
|
47
|
-
legendWidth: legendWidth,
|
|
48
64
|
legendAlign: legendAlign,
|
|
49
|
-
legendSpacing: legendSpacing,
|
|
50
65
|
error: error,
|
|
51
66
|
warning: warning,
|
|
52
67
|
isRequired: required,
|
|
53
68
|
isOptional: isOptional
|
|
54
|
-
},
|
|
69
|
+
}, combinedAriaDescribedBy && {
|
|
70
|
+
"aria-describedby": combinedAriaDescribedBy
|
|
71
|
+
}, (0, _tags.default)("checkboxgroup", rest), {
|
|
55
72
|
blockGroupBehaviour: !(error || warning)
|
|
56
|
-
}, (0, _utils.filterStyledSystemMarginProps)(
|
|
73
|
+
}, (0, _utils.filterStyledSystemMarginProps)(rest)), legendHelp && /*#__PURE__*/_react.default.createElement(_checkboxGroup.StyledHintText, {
|
|
74
|
+
id: inputHintId
|
|
75
|
+
}, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
|
|
57
76
|
position: "relative"
|
|
58
77
|
}, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
|
|
59
78
|
error: error,
|
|
60
|
-
warning: warning
|
|
79
|
+
warning: warning,
|
|
80
|
+
validationId: validationId
|
|
61
81
|
}), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
|
|
62
82
|
warning: !!(!error && warning),
|
|
63
83
|
inline: inline
|
|
64
84
|
}), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
|
|
65
85
|
"data-component": "checkbox-group",
|
|
66
86
|
"data-role": "checkbox-group",
|
|
67
|
-
legendInline: legendInline,
|
|
68
87
|
inline: inline
|
|
69
88
|
}, /*#__PURE__*/_react.default.createElement(_checkboxGroup2.default.Provider, {
|
|
70
89
|
value: {
|
|
@@ -76,6 +95,7 @@ const CheckboxGroup = props => {
|
|
|
76
95
|
}, children))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
|
|
77
96
|
tooltipPosition: tooltipPosition
|
|
78
97
|
}, /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
|
|
98
|
+
id: uniqueId,
|
|
79
99
|
legend: legend,
|
|
80
100
|
inline: legendInline,
|
|
81
101
|
legendWidth: legendWidth,
|
|
@@ -85,10 +105,12 @@ const CheckboxGroup = props => {
|
|
|
85
105
|
warning: warning,
|
|
86
106
|
info: info,
|
|
87
107
|
isRequired: required,
|
|
88
|
-
isOptional: isOptional
|
|
89
|
-
|
|
108
|
+
isOptional: isOptional,
|
|
109
|
+
"aria-describedby": ariaDescribedBy,
|
|
110
|
+
validationId: validationId
|
|
111
|
+
}, (0, _tags.default)("checkboxgroup", rest), {
|
|
90
112
|
blockGroupBehaviour: !(error || warning || info)
|
|
91
|
-
}, (0, _utils.filterStyledSystemMarginProps)(
|
|
113
|
+
}, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
|
|
92
114
|
"data-component": "checkbox-group",
|
|
93
115
|
"data-role": "checkbox-group",
|
|
94
116
|
legendInline: legendInline
|
|
@@ -321,7 +321,7 @@ const NumeralDate = ({
|
|
|
321
321
|
legendWidth: labelWidth,
|
|
322
322
|
legendSpacing: labelSpacing,
|
|
323
323
|
validationId: validationId,
|
|
324
|
-
"aria-describedby": ariaDescribedBy
|
|
324
|
+
"aria-describedby": validationOnLabel ? ariaDescribedBy : fieldHelpId
|
|
325
325
|
}, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_box.default, {
|
|
326
326
|
display: "flex",
|
|
327
327
|
flexDirection: "column",
|
|
@@ -2,6 +2,11 @@ import React from "react";
|
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { ValidationProps } from "../../../__internal__/validations";
|
|
4
4
|
export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
|
|
5
|
+
/**
|
|
6
|
+
* Unique identifier for the component.
|
|
7
|
+
* Will use a randomly generated GUID if none is provided.
|
|
8
|
+
*/
|
|
9
|
+
id?: string;
|
|
5
10
|
/** Breakpoint for adaptive legend (inline labels change to top aligned). Enables the adaptive behaviour when set */
|
|
6
11
|
adaptiveLegendBreakpoint?: number;
|
|
7
12
|
/** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
|
|
@@ -12,7 +17,7 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
|
|
|
12
17
|
inline?: boolean;
|
|
13
18
|
/** Spacing between labels and radio buttons, given number will be multiplied by base spacing unit (8) */
|
|
14
19
|
labelSpacing?: 1 | 2;
|
|
15
|
-
/** The content for the
|
|
20
|
+
/** The content for the RadioButtonGroup Legend */
|
|
16
21
|
legend?: string;
|
|
17
22
|
/**
|
|
18
23
|
* The content for the RadioButtonGroup hint text,
|
|
@@ -43,7 +48,7 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
|
|
|
43
48
|
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
44
49
|
}
|
|
45
50
|
export declare const RadioButtonGroup: {
|
|
46
|
-
(
|
|
51
|
+
({ children, id, name, legend, legendHelp, error, warning, info, onBlur, onChange, value, inline, legendInline, legendWidth, legendAlign, legendSpacing, labelSpacing, adaptiveLegendBreakpoint, adaptiveSpacingBreakpoint, required, isOptional, tooltipPosition, ...rest }: RadioButtonGroupProps): React.JSX.Element;
|
|
47
52
|
displayName: string;
|
|
48
53
|
};
|
|
49
54
|
export default RadioButtonGroup;
|
|
@@ -18,47 +18,52 @@ var _newValidation = _interopRequireDefault(require("../../carbon-provider/__int
|
|
|
18
18
|
var _validationMessage = _interopRequireDefault(require("../../../__internal__/validation-message/validation-message.component"));
|
|
19
19
|
var _box = _interopRequireDefault(require("../../box"));
|
|
20
20
|
var _textbox = require("../../textbox/textbox.style");
|
|
21
|
+
var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
|
|
22
|
+
var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility"));
|
|
21
23
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
22
24
|
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); }
|
|
23
25
|
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; }
|
|
24
26
|
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); }
|
|
25
27
|
let deprecateUncontrolledWarnTriggered = false;
|
|
26
|
-
const RadioButtonGroup =
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
28
|
+
const RadioButtonGroup = ({
|
|
29
|
+
children,
|
|
30
|
+
id,
|
|
31
|
+
name,
|
|
32
|
+
legend,
|
|
33
|
+
legendHelp,
|
|
34
|
+
error,
|
|
35
|
+
warning,
|
|
36
|
+
info,
|
|
37
|
+
onBlur,
|
|
38
|
+
onChange,
|
|
39
|
+
value,
|
|
40
|
+
inline = false,
|
|
41
|
+
legendInline = false,
|
|
42
|
+
legendWidth,
|
|
43
|
+
legendAlign = "left",
|
|
44
|
+
legendSpacing,
|
|
45
|
+
labelSpacing = 1,
|
|
46
|
+
adaptiveLegendBreakpoint,
|
|
47
|
+
adaptiveSpacingBreakpoint,
|
|
48
|
+
required,
|
|
49
|
+
isOptional,
|
|
50
|
+
tooltipPosition,
|
|
51
|
+
...rest
|
|
52
|
+
}) => {
|
|
50
53
|
const {
|
|
51
54
|
validationRedesignOptIn
|
|
52
55
|
} = (0, _react.useContext)(_newValidation.default);
|
|
53
|
-
const
|
|
56
|
+
const internalId = (0, _react.useRef)((0, _guid.default)());
|
|
57
|
+
const uniqueId = id || internalId.current;
|
|
58
|
+
const inputHintId = legendHelp ? `${uniqueId}-hint` : undefined;
|
|
54
59
|
if (!deprecateUncontrolledWarnTriggered && !onChange) {
|
|
55
60
|
deprecateUncontrolledWarnTriggered = true;
|
|
56
61
|
_logger.default.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
|
|
57
62
|
}
|
|
58
|
-
const marginProps = (0, _utils.filterStyledSystemMarginProps)(
|
|
63
|
+
const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
|
|
59
64
|
const isAboveLegendBreakpoint = (0, _useIsAboveBreakpoint.default)(adaptiveLegendBreakpoint);
|
|
60
65
|
const isAboveSpacingBreakpoint = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);
|
|
61
|
-
let inlineLegend =
|
|
66
|
+
let inlineLegend = legendInline;
|
|
62
67
|
if (adaptiveLegendBreakpoint) {
|
|
63
68
|
inlineLegend = !!isAboveLegendBreakpoint;
|
|
64
69
|
}
|
|
@@ -66,24 +71,37 @@ const RadioButtonGroup = props => {
|
|
|
66
71
|
if (adaptiveSpacingBreakpoint && !isAboveSpacingBreakpoint) {
|
|
67
72
|
marginLeft = undefined;
|
|
68
73
|
}
|
|
74
|
+
const {
|
|
75
|
+
validationId,
|
|
76
|
+
ariaDescribedBy
|
|
77
|
+
} = (0, _useInputAccessibility.default)({
|
|
78
|
+
id: uniqueId,
|
|
79
|
+
validationRedesignOptIn: true,
|
|
80
|
+
error,
|
|
81
|
+
warning,
|
|
82
|
+
info
|
|
83
|
+
});
|
|
84
|
+
const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId].filter(Boolean).join(" ");
|
|
69
85
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
|
|
70
86
|
legend: legend,
|
|
71
87
|
error: error,
|
|
72
88
|
warning: warning,
|
|
73
|
-
inline: inlineLegend,
|
|
74
|
-
legendWidth: legendWidth,
|
|
75
89
|
legendAlign: legendAlign,
|
|
76
|
-
legendSpacing: legendSpacing,
|
|
77
90
|
isRequired: required,
|
|
78
91
|
isOptional: isOptional
|
|
79
|
-
}, (0, _tags.default)("radiogroup",
|
|
92
|
+
}, (0, _tags.default)("radiogroup", rest), marginProps, {
|
|
80
93
|
ml: marginLeft,
|
|
81
94
|
blockGroupBehaviour: !(error || warning)
|
|
82
|
-
}
|
|
95
|
+
}, combinedAriaDescribedBy && {
|
|
96
|
+
"aria-describedby": combinedAriaDescribedBy
|
|
97
|
+
}), legendHelp && /*#__PURE__*/_react.default.createElement(_radioButtonGroup.StyledHintText, {
|
|
98
|
+
id: inputHintId
|
|
99
|
+
}, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
|
|
83
100
|
position: "relative"
|
|
84
101
|
}, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
|
|
85
102
|
error: error,
|
|
86
|
-
warning: warning
|
|
103
|
+
warning: warning,
|
|
104
|
+
validationId: validationId
|
|
87
105
|
}), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
|
|
88
106
|
"data-role": "radio-error-border",
|
|
89
107
|
inline: inline,
|
|
@@ -122,9 +140,11 @@ const RadioButtonGroup = props => {
|
|
|
122
140
|
legendSpacing: legendSpacing,
|
|
123
141
|
isRequired: required,
|
|
124
142
|
isOptional: isOptional
|
|
125
|
-
}, (0, _tags.default)("radiogroup",
|
|
143
|
+
}, (0, _tags.default)("radiogroup", rest), marginProps, {
|
|
126
144
|
ml: marginLeft,
|
|
127
|
-
blockGroupBehaviour: !(error || warning || info)
|
|
145
|
+
blockGroupBehaviour: !(error || warning || info),
|
|
146
|
+
"aria-describedby": ariaDescribedBy,
|
|
147
|
+
validationId: validationId
|
|
128
148
|
}), /*#__PURE__*/_react.default.createElement(_radioButtonGroup.default, {
|
|
129
149
|
"data-component": "radio-button-group",
|
|
130
150
|
role: "radiogroup",
|
|
@@ -84,7 +84,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
|
|
|
84
84
|
readOnly?: boolean;
|
|
85
85
|
/** Flag to configure component as optional */
|
|
86
86
|
isOptional?: boolean;
|
|
87
|
-
/** The number of visible text lines for the control */
|
|
87
|
+
/** The number of visible text lines for the control. When set, this determines the height of the textarea, and the minHeight property is ignored. */
|
|
88
88
|
rows?: number;
|
|
89
89
|
/** [Legacy] Overrides the default tooltip position */
|
|
90
90
|
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
@@ -102,7 +102,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
|
|
|
102
102
|
borderRadius?: BorderRadiusType | BorderRadiusType[];
|
|
103
103
|
/** Hides the borders for the component. Please note that validation and focus styling will still be applied */
|
|
104
104
|
hideBorders?: boolean;
|
|
105
|
-
/** Specify the minimum height */
|
|
105
|
+
/** Specify the minimum height. This property is only applied if rows is not set. */
|
|
106
106
|
minHeight?: number;
|
|
107
107
|
}
|
|
108
108
|
export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -9,6 +9,8 @@ export declare type TimeValue = {
|
|
|
9
9
|
hours: string;
|
|
10
10
|
minutes: string;
|
|
11
11
|
period?: ToggleValue;
|
|
12
|
+
formattedHours?: string;
|
|
13
|
+
formattedMinutes?: string;
|
|
12
14
|
};
|
|
13
15
|
export interface TimeInputEvent {
|
|
14
16
|
target: {
|
|
@@ -55,7 +57,7 @@ export interface TimeProps extends Omit<TagProps, "data-component">, MarginProps
|
|
|
55
57
|
/** Set a name value on the component */
|
|
56
58
|
name?: string;
|
|
57
59
|
/** Callback called when focus is lost on input elements */
|
|
58
|
-
onBlur?: (ev?: React.FocusEvent<HTMLInputElement
|
|
60
|
+
onBlur?: (ev?: React.FocusEvent<HTMLInputElement>, value?: TimeValue) => void;
|
|
59
61
|
/** Flag to configure component as mandatory */
|
|
60
62
|
required?: boolean;
|
|
61
63
|
/** Flag to configure component as optional */
|
|
@@ -64,7 +64,10 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
64
64
|
minutes: minuteValue,
|
|
65
65
|
period: toggleValue
|
|
66
66
|
} = value;
|
|
67
|
+
const formattedHoursValue = hourValue.length ? hourValue.padStart(2, "0") : hourValue;
|
|
68
|
+
const formattedMinutesValue = minuteValue.length ? minuteValue.padStart(2, "0") : minuteValue;
|
|
67
69
|
const [inputValues, setInputValues] = (0, _react.useState)([hourValue, minuteValue]);
|
|
70
|
+
const [formattedInputValues, setFormattedInputValues] = (0, _react.useState)([formattedHoursValue, formattedMinutesValue]);
|
|
68
71
|
const locale = (0, _useLocale.default)();
|
|
69
72
|
const showToggle = toggleValue !== undefined;
|
|
70
73
|
const [period, setPeriod] = (0, _react.useState)(toggleValue);
|
|
@@ -113,6 +116,9 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
113
116
|
const hours = inputName === "hrs" ? ev.target.value : inputValues[0];
|
|
114
117
|
const minutes = inputName === "mins" ? ev.target.value : inputValues[1];
|
|
115
118
|
setInputValues([hours, minutes]);
|
|
119
|
+
const formattedHours = hours.length ? hours.padStart(2, "0") : hours;
|
|
120
|
+
const formattedMinutes = minutes.length ? minutes.padStart(2, "0") : minutes;
|
|
121
|
+
setFormattedInputValues([formattedHours, formattedMinutes]);
|
|
116
122
|
onChange({
|
|
117
123
|
target: {
|
|
118
124
|
name,
|
|
@@ -120,13 +126,16 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
120
126
|
value: {
|
|
121
127
|
hours,
|
|
122
128
|
minutes,
|
|
123
|
-
period
|
|
129
|
+
period,
|
|
130
|
+
formattedHours,
|
|
131
|
+
formattedMinutes
|
|
124
132
|
}
|
|
125
133
|
}
|
|
126
134
|
});
|
|
127
135
|
};
|
|
128
136
|
const handlePeriodChange = periodName => {
|
|
129
137
|
const [hours, minutes] = inputValues;
|
|
138
|
+
const [formattedHours, formattedMinutes] = formattedInputValues;
|
|
130
139
|
setPeriod(periodName);
|
|
131
140
|
onChange({
|
|
132
141
|
target: {
|
|
@@ -135,18 +144,29 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
135
144
|
value: {
|
|
136
145
|
hours,
|
|
137
146
|
minutes,
|
|
138
|
-
period: periodName
|
|
147
|
+
period: periodName,
|
|
148
|
+
formattedHours,
|
|
149
|
+
formattedMinutes
|
|
139
150
|
}
|
|
140
151
|
}
|
|
141
152
|
});
|
|
142
153
|
};
|
|
143
154
|
const handleBlur = (0, _react.useCallback)(ev => {
|
|
144
155
|
setTimeout(() => {
|
|
156
|
+
const [hours, minutes] = inputValues;
|
|
157
|
+
const [formattedHours, formattedMinutes] = formattedInputValues;
|
|
158
|
+
const timeValueObj = {
|
|
159
|
+
hours,
|
|
160
|
+
minutes,
|
|
161
|
+
period,
|
|
162
|
+
formattedHours,
|
|
163
|
+
formattedMinutes
|
|
164
|
+
};
|
|
145
165
|
if (hoursRef.current !== document.activeElement && minsRef.current !== document.activeElement) {
|
|
146
|
-
onBlur?.(ev);
|
|
166
|
+
onBlur?.(ev, timeValueObj);
|
|
147
167
|
}
|
|
148
168
|
});
|
|
149
|
-
}, [onBlur]);
|
|
169
|
+
}, [formattedInputValues, inputValues, onBlur, period]);
|
|
150
170
|
return /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
|
|
151
171
|
legend: label,
|
|
152
172
|
legendMargin: {
|
|
@@ -438,6 +458,8 @@ if (process.env.NODE_ENV !== "production") {
|
|
|
438
458
|
})
|
|
439
459
|
}),
|
|
440
460
|
"value": _propTypes.default.shape({
|
|
461
|
+
"formattedHours": _propTypes.default.string,
|
|
462
|
+
"formattedMinutes": _propTypes.default.string,
|
|
441
463
|
"hours": _propTypes.default.string.isRequired,
|
|
442
464
|
"minutes": _propTypes.default.string.isRequired,
|
|
443
465
|
"period": _propTypes.default.oneOf(["AM", "PM"])
|
package/package.json
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "carbon-react",
|
|
3
|
-
"version": "147.
|
|
3
|
+
"version": "147.9.1",
|
|
4
4
|
"description": "A library of reusable React components for easily building user interfaces.",
|
|
5
5
|
"files": [
|
|
6
6
|
"lib",
|
|
7
|
-
"esm"
|
|
8
|
-
"scripts/check_rfcs/check_rfcs.js",
|
|
9
|
-
"scripts/check_rfcs/index.js"
|
|
7
|
+
"esm"
|
|
10
8
|
],
|
|
11
9
|
"scripts": {
|
|
12
10
|
"start": "node ./scripts/check_node_version.mjs && dotenvx run -- storybook dev -p 9001 -c .storybook",
|
|
@@ -18,7 +16,6 @@
|
|
|
18
16
|
"copy-files": "node ./scripts/copy-files.js",
|
|
19
17
|
"precompile": "npm run type-check && npm run clean-lib && npm run build && npm run build:types && npm run copy-files",
|
|
20
18
|
"prepublishOnly": "npm run precompile",
|
|
21
|
-
"postinstall": "node ./scripts/check_rfcs/index.js",
|
|
22
19
|
"watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
|
|
23
20
|
"build-storybook": "dotenvx run -- storybook build -c .storybook",
|
|
24
21
|
"build-storybook:prod": "dotenvx run -f .env.production -- storybook build -c .storybook",
|
|
@@ -120,7 +117,7 @@
|
|
|
120
117
|
"chromatic": "^6.17.4",
|
|
121
118
|
"commitizen": "^4.3.0",
|
|
122
119
|
"concurrently": "^8.2.2",
|
|
123
|
-
"conventional-changelog-conventionalcommits": "^
|
|
120
|
+
"conventional-changelog-conventionalcommits": "^8.0.0",
|
|
124
121
|
"core-js": "^3.33.3",
|
|
125
122
|
"css-loader": "^6.8.1",
|
|
126
123
|
"cz-conventional-changelog": "^3.3.0",
|
|
@@ -165,7 +162,7 @@
|
|
|
165
162
|
"react-test-renderer": "^17.0.2",
|
|
166
163
|
"remark-gfm": "^4.0.0",
|
|
167
164
|
"rimraf": "^3.0.2",
|
|
168
|
-
"semantic-release": "^
|
|
165
|
+
"semantic-release": "^24.2.3",
|
|
169
166
|
"semver": "^7.5.4",
|
|
170
167
|
"sprintf-js": "^1.1.3",
|
|
171
168
|
"storybook": "^8.3.3",
|
|
@@ -179,12 +176,10 @@
|
|
|
179
176
|
"dependencies": {
|
|
180
177
|
"@floating-ui/dom": "~1.2.9",
|
|
181
178
|
"@floating-ui/react-dom": "~1.3.0",
|
|
182
|
-
"@octokit/rest": "^18.12.0",
|
|
183
179
|
"@styled-system/prop-types": "^5.1.5",
|
|
184
180
|
"@tanstack/react-virtual": "3.10.1",
|
|
185
181
|
"@types/styled-system": "^5.1.22",
|
|
186
182
|
"chalk": "^4.1.2",
|
|
187
|
-
"ci-info": "^3.8.0",
|
|
188
183
|
"classnames": "~2.3.2",
|
|
189
184
|
"crypto-js": "^4.2.0",
|
|
190
185
|
"date-fns": "^2.30.0",
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
/* eslint-disable no-console */
|
|
2
|
-
const { Octokit } = require("@octokit/rest");
|
|
3
|
-
const chalk = require("chalk");
|
|
4
|
-
const ci = require("ci-info");
|
|
5
|
-
|
|
6
|
-
const octokit = new Octokit({
|
|
7
|
-
baseUrl: "https://api.github.com",
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
const method = "GET";
|
|
11
|
-
const owner = "sage";
|
|
12
|
-
const path = "pulls";
|
|
13
|
-
const repo = "carbon";
|
|
14
|
-
const url = "/repos/{owner}/{repo}/{path}";
|
|
15
|
-
|
|
16
|
-
const getOpenRfcs = async () => {
|
|
17
|
-
const { data } = await octokit.request({
|
|
18
|
-
owner,
|
|
19
|
-
repo,
|
|
20
|
-
url,
|
|
21
|
-
method,
|
|
22
|
-
path,
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
return data.filter((item) => {
|
|
26
|
-
const labels = item.labels.filter((label) => label.name === "RFC");
|
|
27
|
-
|
|
28
|
-
return labels.length > 0;
|
|
29
|
-
});
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
const getTitle = (rfc) => rfc.title.split(": ")[1];
|
|
33
|
-
|
|
34
|
-
const checkRfcs = async () => {
|
|
35
|
-
if (ci.isCI && process.env.NODE_ENV !== "test") {
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
try {
|
|
40
|
-
const openRfcs = await getOpenRfcs();
|
|
41
|
-
|
|
42
|
-
if (!openRfcs.length) return;
|
|
43
|
-
|
|
44
|
-
const header = chalk.bold.inverse.white(
|
|
45
|
-
" ".repeat(20),
|
|
46
|
-
"Open RFCs for carbon-react",
|
|
47
|
-
" ".repeat(20),
|
|
48
|
-
);
|
|
49
|
-
|
|
50
|
-
const rfcText = openRfcs
|
|
51
|
-
.map((item) => {
|
|
52
|
-
const title = getTitle(item);
|
|
53
|
-
return `- ${chalk.bold(title)}: ${chalk.cyan.italic(item.html_url)}`;
|
|
54
|
-
})
|
|
55
|
-
.join("\n\n");
|
|
56
|
-
|
|
57
|
-
console.log(`${header}\n\n${rfcText}\n`);
|
|
58
|
-
} catch (error) {
|
|
59
|
-
const rfcLink =
|
|
60
|
-
"https://github.com/Sage/carbon/pulls?q=is%3Aopen+is%3Apr+label%3ARFC";
|
|
61
|
-
const message = `Failed to retrieve open RFCs for carbon-react. Go to ${chalk.cyan.italic(
|
|
62
|
-
rfcLink,
|
|
63
|
-
)} to view current RFCs.`;
|
|
64
|
-
console.log(
|
|
65
|
-
`${chalk.yellow.inverse(" WARN ")}\n${chalk.yellow(message)}\n`,
|
|
66
|
-
);
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
module.exports = checkRfcs;
|