carbon-react 152.5.1 → 152.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/__internal__/input/input.component.d.ts +6 -1
- package/esm/__internal__/input/input.component.js +3 -2
- package/esm/components/accordion/accordion-group/accordion-group.component.js +6 -0
- package/esm/components/select/__internal__/select-textbox/select-textbox.component.js +1 -1
- package/esm/components/select/simple-select/simple-select.component.js +1 -1
- package/esm/components/textarea/textarea.component.js +10 -3
- package/esm/components/textbox/textbox.component.js +10 -3
- package/esm/hooks/{__internal__/useCharacterCount → useCharacterCount}/useCharacterCount.js +3 -3
- package/lib/__internal__/input/input.component.d.ts +6 -1
- package/lib/__internal__/input/input.component.js +3 -2
- package/lib/components/accordion/accordion-group/accordion-group.component.js +6 -0
- package/lib/components/select/__internal__/select-textbox/select-textbox.component.js +1 -1
- package/lib/components/select/simple-select/simple-select.component.js +1 -1
- package/lib/components/textarea/textarea.component.js +10 -3
- package/lib/components/textbox/textbox.component.js +10 -3
- package/lib/hooks/useCharacterCount/package.json +6 -0
- package/lib/hooks/{__internal__/useCharacterCount → useCharacterCount}/useCharacterCount.js +3 -3
- package/package.json +1 -1
- package/lib/hooks/__internal__/useCharacterCount/package.json +0 -6
- /package/esm/hooks/{__internal__/useCharacterCount → useCharacterCount}/index.d.ts +0 -0
- /package/esm/hooks/{__internal__/useCharacterCount → useCharacterCount}/index.js +0 -0
- /package/esm/hooks/{__internal__/useCharacterCount → useCharacterCount}/useCharacterCount.d.ts +0 -0
- /package/lib/hooks/{__internal__/useCharacterCount → useCharacterCount}/index.d.ts +0 -0
- /package/lib/hooks/{__internal__/useCharacterCount → useCharacterCount}/index.js +0 -0
- /package/lib/hooks/{__internal__/useCharacterCount → useCharacterCount}/useCharacterCount.d.ts +0 -0
|
@@ -3,8 +3,13 @@ import { BorderRadiusType } from "../../components/box/box.component";
|
|
|
3
3
|
export declare type EnterKeyHintTypes = "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
|
|
4
4
|
export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
5
5
|
align?: "right" | "left";
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* Set the ID of the input's description.
|
|
8
|
+
* @deprecated Please use `aria-describedby` instead.
|
|
9
|
+
*/
|
|
7
10
|
ariaDescribedBy?: string;
|
|
11
|
+
/** The ID of the input's description, is set along with hint text and error message. */
|
|
12
|
+
"aria-describedby"?: string;
|
|
8
13
|
/** Override the variant component */
|
|
9
14
|
as?: React.ElementType;
|
|
10
15
|
/** If true the Component will be focused when rendered */
|
|
@@ -27,7 +27,8 @@ function selectTextOnFocus(input) {
|
|
|
27
27
|
const Input = /*#__PURE__*/React.forwardRef(({
|
|
28
28
|
align,
|
|
29
29
|
"aria-labelledby": ariaLabelledBy,
|
|
30
|
-
ariaDescribedBy,
|
|
30
|
+
"aria-describedby": ariaDescribedBy,
|
|
31
|
+
ariaDescribedBy: ariaDescribedByDeprecated,
|
|
31
32
|
placeholder,
|
|
32
33
|
disabled,
|
|
33
34
|
readOnly,
|
|
@@ -126,7 +127,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
|
|
|
126
127
|
handleDeferred(ev);
|
|
127
128
|
};
|
|
128
129
|
const hasValidationPart = (context.hasFocus || groupContext.hasFocus || context.hasMouseOver || groupContext.hasMouseOver) && validationIconId;
|
|
129
|
-
const descriptionList = ariaDescribedBy ? [ariaDescribedBy] : [];
|
|
130
|
+
const descriptionList = ariaDescribedBy || ariaDescribedByDeprecated ? [ariaDescribedBy || ariaDescribedByDeprecated] : [];
|
|
130
131
|
if (hasValidationPart) {
|
|
131
132
|
descriptionList.push(validationIconId);
|
|
132
133
|
}
|
|
@@ -5,14 +5,20 @@ import Events from "../../../__internal__/utils/helpers/events";
|
|
|
5
5
|
import Accordion from "../accordion.component";
|
|
6
6
|
import { StyledAccordionGroup } from "../accordion.style";
|
|
7
7
|
import tagComponent from "../../../__internal__/utils/helpers/tags";
|
|
8
|
+
import Logger from "../../../__internal__/utils/logger";
|
|
8
9
|
|
|
9
10
|
// typescript-to-proptypes breaks on recursive type references so it has to be an interface
|
|
10
11
|
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
|
11
12
|
|
|
13
|
+
let deprecatedWarnTriggered = false;
|
|
12
14
|
export const AccordionGroup = ({
|
|
13
15
|
children,
|
|
14
16
|
...rest
|
|
15
17
|
}) => {
|
|
18
|
+
if (!deprecatedWarnTriggered) {
|
|
19
|
+
deprecatedWarnTriggered = true;
|
|
20
|
+
Logger.deprecate("`AccordionGroup` is deprecated and will soon be removed.");
|
|
21
|
+
}
|
|
16
22
|
const hasProperChildren = useMemo(() => {
|
|
17
23
|
let hasAccordionChildren = true;
|
|
18
24
|
React.Children.toArray(children).forEach(child => {
|
|
@@ -72,7 +72,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
|
|
|
72
72
|
isInputInSelect: true
|
|
73
73
|
}
|
|
74
74
|
}, /*#__PURE__*/React.createElement(Textbox, _extends({
|
|
75
|
-
|
|
75
|
+
"aria-describedby": ariaDescribedBy,
|
|
76
76
|
"aria-label": ariaLabel,
|
|
77
77
|
"data-element": "select-input",
|
|
78
78
|
"data-role": "select-textbox",
|
|
@@ -342,7 +342,7 @@ export const SimpleSelect = /*#__PURE__*/React.forwardRef(({
|
|
|
342
342
|
"aria-controls": selectListId.current,
|
|
343
343
|
activeDescendantId: activeDescendantId,
|
|
344
344
|
ariaLabelledby: ariaLabelledby,
|
|
345
|
-
|
|
345
|
+
"aria-describedby": ariaDescribedBy,
|
|
346
346
|
isOpen: isOpen
|
|
347
347
|
}, getTextboxProps()))), selectList);
|
|
348
348
|
});
|
|
@@ -3,7 +3,7 @@ import React, { useRef, useEffect, useContext, useCallback, useState } from "rea
|
|
|
3
3
|
import tagComponent from "../../__internal__/utils/helpers/tags";
|
|
4
4
|
import { InputPresentation } from "../../__internal__/input";
|
|
5
5
|
import FormField from "../../__internal__/form-field";
|
|
6
|
-
import useCharacterCount from "../../hooks/
|
|
6
|
+
import useCharacterCount from "../../hooks/useCharacterCount";
|
|
7
7
|
import Input from "../../__internal__/input/input.component";
|
|
8
8
|
import { InputBehaviour } from "../../__internal__/input-behaviour";
|
|
9
9
|
import InputIconToggle from "../../__internal__/input-icon-toggle";
|
|
@@ -19,9 +19,12 @@ import Logger from "../../__internal__/utils/logger";
|
|
|
19
19
|
import HintText from "../../__internal__/hint-text";
|
|
20
20
|
import { filterStyledSystemMarginProps } from "../../style/utils";
|
|
21
21
|
let deprecateUncontrolledWarnTriggered = false;
|
|
22
|
+
let deprecatedAriaDescribedByWarnTriggered = false;
|
|
22
23
|
let warnBorderRadiusArrayTooLarge = false;
|
|
23
24
|
export const Textarea = /*#__PURE__*/React.forwardRef(({
|
|
24
25
|
"aria-labelledby": ariaLabelledBy,
|
|
26
|
+
"aria-describedby": ariaDescribedByProp,
|
|
27
|
+
ariaDescribedBy: ariaDescribedByPropDeprecated,
|
|
25
28
|
autoFocus,
|
|
26
29
|
inputHint,
|
|
27
30
|
fieldHelp,
|
|
@@ -103,6 +106,10 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
|
|
|
103
106
|
deprecateUncontrolledWarnTriggered = true;
|
|
104
107
|
Logger.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
|
|
105
108
|
}
|
|
109
|
+
if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByPropDeprecated) {
|
|
110
|
+
deprecatedAriaDescribedByWarnTriggered = true;
|
|
111
|
+
Logger.deprecate("The `ariaDescribedBy` prop in `Textarea` is deprecated and will soon be removed, please use `aria-describedby` instead.");
|
|
112
|
+
}
|
|
106
113
|
if (Array.isArray(borderRadius) && borderRadius.length > 4 && !warnBorderRadiusArrayTooLarge) {
|
|
107
114
|
// eslint-disable-next-line no-console
|
|
108
115
|
console.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values.");
|
|
@@ -172,7 +179,7 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
|
|
|
172
179
|
const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
|
|
173
180
|
const hintId = useRef(guid());
|
|
174
181
|
const inputHintId = inputHint ? hintId.current : undefined;
|
|
175
|
-
const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
|
|
182
|
+
const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByPropDeprecated].filter(Boolean).join(" ");
|
|
176
183
|
const input = /*#__PURE__*/React.createElement(InputPresentation, {
|
|
177
184
|
disabled: disabled,
|
|
178
185
|
readOnly: readOnly,
|
|
@@ -186,7 +193,7 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
|
|
|
186
193
|
}, /*#__PURE__*/React.createElement(Input, _extends({
|
|
187
194
|
"aria-invalid": !!error,
|
|
188
195
|
"aria-labelledby": ariaLabelledBy,
|
|
189
|
-
|
|
196
|
+
"aria-describedby": combinedAriaDescribedBy,
|
|
190
197
|
autoFocus: autoFocus,
|
|
191
198
|
name: name,
|
|
192
199
|
value: value,
|
|
@@ -12,7 +12,7 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
|
|
|
12
12
|
import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
|
|
13
13
|
import NumeralDateContext from "../numeral-date/__internal__/numeral-date.context";
|
|
14
14
|
import Logger from "../../__internal__/utils/logger";
|
|
15
|
-
import useCharacterCount from "../../hooks/
|
|
15
|
+
import useCharacterCount from "../../hooks/useCharacterCount";
|
|
16
16
|
import useUniqueId from "../../hooks/__internal__/useUniqueId";
|
|
17
17
|
import guid from "../../__internal__/utils/helpers/guid";
|
|
18
18
|
import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
|
|
@@ -23,8 +23,11 @@ export const SIZE_DEFAULT = "medium";
|
|
|
23
23
|
export const LABEL_WIDTH_DEFAULT = 30;
|
|
24
24
|
export const LABEL_VALIDATION_DEFAULT = false;
|
|
25
25
|
let deprecateUncontrolledWarnTriggered = false;
|
|
26
|
+
let deprecatedAriaDescribedByWarnTriggered = false;
|
|
26
27
|
export const Textbox = /*#__PURE__*/React.forwardRef(({
|
|
27
28
|
"aria-labelledby": ariaLabelledBy,
|
|
29
|
+
"aria-describedby": ariaDescribedByProp,
|
|
30
|
+
ariaDescribedBy: ariaDescribedByDeprecated,
|
|
28
31
|
align = ALIGN_DEFAULT,
|
|
29
32
|
autoFocus,
|
|
30
33
|
children,
|
|
@@ -106,6 +109,10 @@ export const Textbox = /*#__PURE__*/React.forwardRef(({
|
|
|
106
109
|
deprecateUncontrolledWarnTriggered = true;
|
|
107
110
|
Logger.deprecate("Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
|
|
108
111
|
}
|
|
112
|
+
if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByDeprecated) {
|
|
113
|
+
deprecatedAriaDescribedByWarnTriggered = true;
|
|
114
|
+
Logger.deprecate("The `ariaDescribedBy` prop in `Textbox` is deprecated and will soon be removed, please use `aria-describedby` instead.");
|
|
115
|
+
}
|
|
109
116
|
const {
|
|
110
117
|
labelId,
|
|
111
118
|
validationId,
|
|
@@ -122,7 +129,7 @@ export const Textbox = /*#__PURE__*/React.forwardRef(({
|
|
|
122
129
|
});
|
|
123
130
|
const hintId = useRef(guid());
|
|
124
131
|
const inputHintId = inputHint ? hintId.current : undefined;
|
|
125
|
-
const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
|
|
132
|
+
const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByDeprecated].filter(Boolean).join(" ");
|
|
126
133
|
const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
|
|
127
134
|
const input = /*#__PURE__*/React.createElement(InputPresentation, {
|
|
128
135
|
align: align,
|
|
@@ -146,7 +153,7 @@ export const Textbox = /*#__PURE__*/React.forwardRef(({
|
|
|
146
153
|
align: align,
|
|
147
154
|
"aria-invalid": !!error,
|
|
148
155
|
"aria-labelledby": ariaLabelledBy,
|
|
149
|
-
|
|
156
|
+
"aria-describedby": combinedAriaDescribedBy,
|
|
150
157
|
autoFocus: autoFocus,
|
|
151
158
|
deferTimeout: deferTimeout,
|
|
152
159
|
disabled: disabled,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useMemo, useRef, useEffect, useState } from "react";
|
|
2
|
-
import CharacterCount from "
|
|
3
|
-
import guid from "
|
|
4
|
-
import useDebounce from "../useDebounce";
|
|
2
|
+
import CharacterCount from "../../__internal__/character-count";
|
|
3
|
+
import guid from "../../__internal__/utils/helpers/guid";
|
|
4
|
+
import useDebounce from "../__internal__/useDebounce";
|
|
5
5
|
const useCharacterCount = (value = "", characterLimit, characterCountAriaLive) => {
|
|
6
6
|
const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
|
|
7
7
|
const [debouncedValue, setDebouncedValue] = useState(value);
|
|
@@ -3,8 +3,13 @@ import { BorderRadiusType } from "../../components/box/box.component";
|
|
|
3
3
|
export declare type EnterKeyHintTypes = "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
|
|
4
4
|
export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
5
5
|
align?: "right" | "left";
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* Set the ID of the input's description.
|
|
8
|
+
* @deprecated Please use `aria-describedby` instead.
|
|
9
|
+
*/
|
|
7
10
|
ariaDescribedBy?: string;
|
|
11
|
+
/** The ID of the input's description, is set along with hint text and error message. */
|
|
12
|
+
"aria-describedby"?: string;
|
|
8
13
|
/** Override the variant component */
|
|
9
14
|
as?: React.ElementType;
|
|
10
15
|
/** If true the Component will be focused when rendered */
|
|
@@ -36,7 +36,8 @@ function selectTextOnFocus(input) {
|
|
|
36
36
|
const Input = /*#__PURE__*/_react.default.forwardRef(({
|
|
37
37
|
align,
|
|
38
38
|
"aria-labelledby": ariaLabelledBy,
|
|
39
|
-
ariaDescribedBy,
|
|
39
|
+
"aria-describedby": ariaDescribedBy,
|
|
40
|
+
ariaDescribedBy: ariaDescribedByDeprecated,
|
|
40
41
|
placeholder,
|
|
41
42
|
disabled,
|
|
42
43
|
readOnly,
|
|
@@ -135,7 +136,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
135
136
|
handleDeferred(ev);
|
|
136
137
|
};
|
|
137
138
|
const hasValidationPart = (context.hasFocus || groupContext.hasFocus || context.hasMouseOver || groupContext.hasMouseOver) && validationIconId;
|
|
138
|
-
const descriptionList = ariaDescribedBy ? [ariaDescribedBy] : [];
|
|
139
|
+
const descriptionList = ariaDescribedBy || ariaDescribedByDeprecated ? [ariaDescribedBy || ariaDescribedByDeprecated] : [];
|
|
139
140
|
if (hasValidationPart) {
|
|
140
141
|
descriptionList.push(validationIconId);
|
|
141
142
|
}
|
|
@@ -10,6 +10,7 @@ var _events = _interopRequireDefault(require("../../../__internal__/utils/helper
|
|
|
10
10
|
var _accordion = _interopRequireDefault(require("../accordion.component"));
|
|
11
11
|
var _accordion2 = require("../accordion.style");
|
|
12
12
|
var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
|
|
13
|
+
var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
|
|
13
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
15
|
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); }
|
|
15
16
|
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; }
|
|
@@ -17,10 +18,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
17
18
|
// typescript-to-proptypes breaks on recursive type references so it has to be an interface
|
|
18
19
|
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
|
19
20
|
|
|
21
|
+
let deprecatedWarnTriggered = false;
|
|
20
22
|
const AccordionGroup = ({
|
|
21
23
|
children,
|
|
22
24
|
...rest
|
|
23
25
|
}) => {
|
|
26
|
+
if (!deprecatedWarnTriggered) {
|
|
27
|
+
deprecatedWarnTriggered = true;
|
|
28
|
+
_logger.default.deprecate("`AccordionGroup` is deprecated and will soon be removed.");
|
|
29
|
+
}
|
|
24
30
|
const hasProperChildren = (0, _react.useMemo)(() => {
|
|
25
31
|
let hasAccordionChildren = true;
|
|
26
32
|
_react.default.Children.toArray(children).forEach(child => {
|
|
@@ -79,7 +79,7 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
79
79
|
isInputInSelect: true
|
|
80
80
|
}
|
|
81
81
|
}, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
|
|
82
|
-
|
|
82
|
+
"aria-describedby": ariaDescribedBy,
|
|
83
83
|
"aria-label": ariaLabel,
|
|
84
84
|
"data-element": "select-input",
|
|
85
85
|
"data-role": "select-textbox",
|
|
@@ -351,7 +351,7 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
|
|
|
351
351
|
"aria-controls": selectListId.current,
|
|
352
352
|
activeDescendantId: activeDescendantId,
|
|
353
353
|
ariaLabelledby: ariaLabelledby,
|
|
354
|
-
|
|
354
|
+
"aria-describedby": ariaDescribedBy,
|
|
355
355
|
isOpen: isOpen
|
|
356
356
|
}, getTextboxProps()))), selectList);
|
|
357
357
|
});
|
|
@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
|
|
9
9
|
var _input = require("../../__internal__/input");
|
|
10
10
|
var _formField = _interopRequireDefault(require("../../__internal__/form-field"));
|
|
11
|
-
var _useCharacterCount = _interopRequireDefault(require("../../hooks/
|
|
11
|
+
var _useCharacterCount = _interopRequireDefault(require("../../hooks/useCharacterCount"));
|
|
12
12
|
var _input2 = _interopRequireDefault(require("../../__internal__/input/input.component"));
|
|
13
13
|
var _inputBehaviour = require("../../__internal__/input-behaviour");
|
|
14
14
|
var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle"));
|
|
@@ -28,9 +28,12 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
28
28
|
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; }
|
|
29
29
|
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); }
|
|
30
30
|
let deprecateUncontrolledWarnTriggered = false;
|
|
31
|
+
let deprecatedAriaDescribedByWarnTriggered = false;
|
|
31
32
|
let warnBorderRadiusArrayTooLarge = false;
|
|
32
33
|
const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_react.default.forwardRef(({
|
|
33
34
|
"aria-labelledby": ariaLabelledBy,
|
|
35
|
+
"aria-describedby": ariaDescribedByProp,
|
|
36
|
+
ariaDescribedBy: ariaDescribedByPropDeprecated,
|
|
34
37
|
autoFocus,
|
|
35
38
|
inputHint,
|
|
36
39
|
fieldHelp,
|
|
@@ -112,6 +115,10 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
|
|
|
112
115
|
deprecateUncontrolledWarnTriggered = true;
|
|
113
116
|
_logger.default.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
|
|
114
117
|
}
|
|
118
|
+
if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByPropDeprecated) {
|
|
119
|
+
deprecatedAriaDescribedByWarnTriggered = true;
|
|
120
|
+
_logger.default.deprecate("The `ariaDescribedBy` prop in `Textarea` is deprecated and will soon be removed, please use `aria-describedby` instead.");
|
|
121
|
+
}
|
|
115
122
|
if (Array.isArray(borderRadius) && borderRadius.length > 4 && !warnBorderRadiusArrayTooLarge) {
|
|
116
123
|
// eslint-disable-next-line no-console
|
|
117
124
|
console.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values.");
|
|
@@ -181,7 +188,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
|
|
|
181
188
|
const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
|
|
182
189
|
const hintId = (0, _react.useRef)((0, _guid.default)());
|
|
183
190
|
const inputHintId = inputHint ? hintId.current : undefined;
|
|
184
|
-
const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
|
|
191
|
+
const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByPropDeprecated].filter(Boolean).join(" ");
|
|
185
192
|
const input = /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
|
|
186
193
|
disabled: disabled,
|
|
187
194
|
readOnly: readOnly,
|
|
@@ -195,7 +202,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
|
|
|
195
202
|
}, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
|
|
196
203
|
"aria-invalid": !!error,
|
|
197
204
|
"aria-labelledby": ariaLabelledBy,
|
|
198
|
-
|
|
205
|
+
"aria-describedby": combinedAriaDescribedBy,
|
|
199
206
|
autoFocus: autoFocus,
|
|
200
207
|
name: name,
|
|
201
208
|
value: value,
|
|
@@ -17,7 +17,7 @@ var _utils = require("../../style/utils");
|
|
|
17
17
|
var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
|
|
18
18
|
var _numeralDate = _interopRequireDefault(require("../numeral-date/__internal__/numeral-date.context"));
|
|
19
19
|
var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
|
|
20
|
-
var _useCharacterCount = _interopRequireDefault(require("../../hooks/
|
|
20
|
+
var _useCharacterCount = _interopRequireDefault(require("../../hooks/useCharacterCount"));
|
|
21
21
|
var _useUniqueId = _interopRequireDefault(require("../../hooks/__internal__/useUniqueId"));
|
|
22
22
|
var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
|
|
23
23
|
var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
|
|
@@ -32,8 +32,11 @@ const SIZE_DEFAULT = exports.SIZE_DEFAULT = "medium";
|
|
|
32
32
|
const LABEL_WIDTH_DEFAULT = exports.LABEL_WIDTH_DEFAULT = 30;
|
|
33
33
|
const LABEL_VALIDATION_DEFAULT = exports.LABEL_VALIDATION_DEFAULT = false;
|
|
34
34
|
let deprecateUncontrolledWarnTriggered = false;
|
|
35
|
+
let deprecatedAriaDescribedByWarnTriggered = false;
|
|
35
36
|
const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
|
|
36
37
|
"aria-labelledby": ariaLabelledBy,
|
|
38
|
+
"aria-describedby": ariaDescribedByProp,
|
|
39
|
+
ariaDescribedBy: ariaDescribedByDeprecated,
|
|
37
40
|
align = ALIGN_DEFAULT,
|
|
38
41
|
autoFocus,
|
|
39
42
|
children,
|
|
@@ -115,6 +118,10 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
115
118
|
deprecateUncontrolledWarnTriggered = true;
|
|
116
119
|
_logger.default.deprecate("Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
|
|
117
120
|
}
|
|
121
|
+
if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByDeprecated) {
|
|
122
|
+
deprecatedAriaDescribedByWarnTriggered = true;
|
|
123
|
+
_logger.default.deprecate("The `ariaDescribedBy` prop in `Textbox` is deprecated and will soon be removed, please use `aria-describedby` instead.");
|
|
124
|
+
}
|
|
118
125
|
const {
|
|
119
126
|
labelId,
|
|
120
127
|
validationId,
|
|
@@ -131,7 +138,7 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
131
138
|
});
|
|
132
139
|
const hintId = (0, _react.useRef)((0, _guid.default)());
|
|
133
140
|
const inputHintId = inputHint ? hintId.current : undefined;
|
|
134
|
-
const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
|
|
141
|
+
const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByDeprecated].filter(Boolean).join(" ");
|
|
135
142
|
const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
|
|
136
143
|
const input = /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
|
|
137
144
|
align: align,
|
|
@@ -155,7 +162,7 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
155
162
|
align: align,
|
|
156
163
|
"aria-invalid": !!error,
|
|
157
164
|
"aria-labelledby": ariaLabelledBy,
|
|
158
|
-
|
|
165
|
+
"aria-describedby": combinedAriaDescribedBy,
|
|
159
166
|
autoFocus: autoFocus,
|
|
160
167
|
deferTimeout: deferTimeout,
|
|
161
168
|
disabled: disabled,
|
|
@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _characterCount = _interopRequireDefault(require("
|
|
9
|
-
var _guid = _interopRequireDefault(require("
|
|
10
|
-
var _useDebounce = _interopRequireDefault(require("../useDebounce"));
|
|
8
|
+
var _characterCount = _interopRequireDefault(require("../../__internal__/character-count"));
|
|
9
|
+
var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
|
|
10
|
+
var _useDebounce = _interopRequireDefault(require("../__internal__/useDebounce"));
|
|
11
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
12
|
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); }
|
|
13
13
|
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; }
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|
/package/esm/hooks/{__internal__/useCharacterCount → useCharacterCount}/useCharacterCount.d.ts
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/lib/hooks/{__internal__/useCharacterCount → useCharacterCount}/useCharacterCount.d.ts
RENAMED
|
File without changes
|