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.
@@ -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, null, /*#__PURE__*/React.createElement(ValidationIcon, {
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()))), children));
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
- (props: CheckboxGroupProps): React.JSX.Element;
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
- export const CheckboxGroup = props => {
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
- children,
21
- legend,
42
+ validationId,
43
+ ariaDescribedBy
44
+ } = useInputAccessibility({
45
+ id: uniqueId,
46
+ validationRedesignOptIn: true,
22
47
  error,
23
48
  warning,
24
- info,
25
- required,
26
- isOptional,
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
- }, tagComponent("checkboxgroup", props), {
60
+ }, combinedAriaDescribedBy && {
61
+ "aria-describedby": combinedAriaDescribedBy
62
+ }, tagComponent("checkboxgroup", rest), {
46
63
  blockGroupBehaviour: !(error || warning)
47
- }, filterStyledSystemMarginProps(props)), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, null, legendHelp), /*#__PURE__*/React.createElement(Box, {
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
- }, tagComponent("checkboxgroup", props), {
99
+ isOptional: isOptional,
100
+ "aria-describedby": ariaDescribedBy,
101
+ validationId: validationId
102
+ }, tagComponent("checkboxgroup", rest), {
81
103
  blockGroupBehaviour: !(error || warning || info)
82
- }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
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 RadioGroup Legend */
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
- (props: RadioButtonGroupProps): React.JSX.Element;
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 = props => {
18
- const {
19
- children,
20
- name,
21
- legend,
22
- legendHelp,
23
- error,
24
- warning,
25
- info,
26
- onBlur,
27
- onChange,
28
- value,
29
- inline = false,
30
- legendInline = false,
31
- legendWidth,
32
- legendAlign = "left",
33
- legendSpacing,
34
- labelSpacing = 1,
35
- adaptiveLegendBreakpoint,
36
- adaptiveSpacingBreakpoint,
37
- required,
38
- isOptional,
39
- tooltipPosition
40
- } = props;
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 legendInlineWithNewValidation = validationRedesignOptIn ? false : legendInline;
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(props);
54
+ const marginProps = filterStyledSystemMarginProps(rest);
50
55
  const isAboveLegendBreakpoint = useIsAboveBreakpoint(adaptiveLegendBreakpoint);
51
56
  const isAboveSpacingBreakpoint = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
52
- let inlineLegend = legendInlineWithNewValidation;
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", props), marginProps, {
83
+ }, tagComponent("radiogroup", rest), marginProps, {
71
84
  ml: marginLeft,
72
85
  blockGroupBehaviour: !(error || warning)
73
- }), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, null, legendHelp), /*#__PURE__*/React.createElement(Box, {
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", props), marginProps, {
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>) => void;
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, null, /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
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()))), children));
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
- (props: CheckboxGroupProps): React.JSX.Element;
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 = props => {
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
- children,
30
- legend,
51
+ validationId,
52
+ ariaDescribedBy
53
+ } = (0, _useInputAccessibility.default)({
54
+ id: uniqueId,
55
+ validationRedesignOptIn: true,
31
56
  error,
32
57
  warning,
33
- info,
34
- required,
35
- isOptional,
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
- }, (0, _tags.default)("checkboxgroup", props), {
69
+ }, combinedAriaDescribedBy && {
70
+ "aria-describedby": combinedAriaDescribedBy
71
+ }, (0, _tags.default)("checkboxgroup", rest), {
55
72
  blockGroupBehaviour: !(error || warning)
56
- }, (0, _utils.filterStyledSystemMarginProps)(props)), legendHelp && /*#__PURE__*/_react.default.createElement(_checkboxGroup.StyledHintText, null, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
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
- }, (0, _tags.default)("checkboxgroup", props), {
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)(props)), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
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 RadioGroup Legend */
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
- (props: RadioButtonGroupProps): React.JSX.Element;
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 = props => {
27
- const {
28
- children,
29
- name,
30
- legend,
31
- legendHelp,
32
- error,
33
- warning,
34
- info,
35
- onBlur,
36
- onChange,
37
- value,
38
- inline = false,
39
- legendInline = false,
40
- legendWidth,
41
- legendAlign = "left",
42
- legendSpacing,
43
- labelSpacing = 1,
44
- adaptiveLegendBreakpoint,
45
- adaptiveSpacingBreakpoint,
46
- required,
47
- isOptional,
48
- tooltipPosition
49
- } = props;
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 legendInlineWithNewValidation = validationRedesignOptIn ? false : legendInline;
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)(props);
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 = legendInlineWithNewValidation;
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", props), marginProps, {
92
+ }, (0, _tags.default)("radiogroup", rest), marginProps, {
80
93
  ml: marginLeft,
81
94
  blockGroupBehaviour: !(error || warning)
82
- }), legendHelp && /*#__PURE__*/_react.default.createElement(_radioButtonGroup.StyledHintText, null, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
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", props), marginProps, {
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>) => void;
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.8.1",
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": "^4.6.3",
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": "^22.0.8",
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;
@@ -1,3 +0,0 @@
1
- const checkRfcs = require("./check_rfcs");
2
-
3
- checkRfcs();