@carbon/react 1.26.0-rc.0 → 1.26.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/es/components/RadioButtonGroup/RadioButtonGroup.js +8 -1
- package/es/components/TextInput/PasswordInput.d.ts +125 -0
- package/es/components/TextInput/PasswordInput.js +10 -6
- package/lib/components/RadioButtonGroup/RadioButtonGroup.js +8 -1
- package/lib/components/TextInput/PasswordInput.d.ts +125 -0
- package/lib/components/TextInput/PasswordInput.js +10 -25
- package/package.json +3 -3
|
@@ -13,8 +13,10 @@ import { Legend } from '../Text/index.js';
|
|
|
13
13
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
14
|
import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
|
|
15
15
|
import mergeRefs from '../../tools/mergeRefs.js';
|
|
16
|
+
import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
|
|
16
17
|
|
|
17
18
|
var _excluded = ["children", "className", "defaultSelected", "disabled", "helperText", "invalid", "invalidText", "labelPosition", "legendText", "name", "onChange", "orientation", "readOnly", "valueSelected", "warn", "warnText"];
|
|
19
|
+
var getInstanceId = setupGetInstanceId();
|
|
18
20
|
var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
19
21
|
var _classNames;
|
|
20
22
|
|
|
@@ -52,6 +54,9 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function (props, r
|
|
|
52
54
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
53
55
|
prevValueSelected = _useState4[0],
|
|
54
56
|
setPrevValueSelected = _useState4[1];
|
|
57
|
+
|
|
58
|
+
var _useRef = useRef(getInstanceId()),
|
|
59
|
+
radioButtonGroupInstanceId = _useRef.current;
|
|
55
60
|
/**
|
|
56
61
|
* prop + state alignment - getDerivedStateFromProps
|
|
57
62
|
* only update if selected prop changes
|
|
@@ -103,7 +108,9 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function (props, r
|
|
|
103
108
|
var wrapperClasses = cx("".concat(prefix, "--form-item"), className);
|
|
104
109
|
var fieldsetClasses = cx("".concat(prefix, "--radio-button-group"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--readonly"), readOnly), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--invalid"), !readOnly && invalid), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--warning"), showWarning), _classNames));
|
|
105
110
|
var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
|
|
111
|
+
var helperId = !helperText ? undefined : "radio-button-group-helper-text-".concat(radioButtonGroupInstanceId);
|
|
106
112
|
var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
|
|
113
|
+
id: helperId,
|
|
107
114
|
className: helperClasses
|
|
108
115
|
}, helperText) : null;
|
|
109
116
|
var divRef = useRef(null);
|
|
@@ -127,7 +134,7 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function (props, r
|
|
|
127
134
|
className: "".concat(prefix, "--radio-button__invalid-icon ").concat(prefix, "--radio-button__invalid-icon--warning")
|
|
128
135
|
}), /*#__PURE__*/React__default.createElement("div", {
|
|
129
136
|
className: "".concat(prefix, "--form-requirement")
|
|
130
|
-
}, warnText)), showHelper && helper)
|
|
137
|
+
}, warnText))), showHelper && helper);
|
|
131
138
|
});
|
|
132
139
|
RadioButtonGroup.propTypes = {
|
|
133
140
|
/**
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import React, { InputHTMLAttributes } from 'react';
|
|
2
|
+
import { ReactNodeLike } from 'prop-types';
|
|
3
|
+
type ExcludedAttributes = 'size';
|
|
4
|
+
export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
|
|
5
|
+
/**
|
|
6
|
+
* Provide a custom className that is applied directly to the underlyling `<input>` node
|
|
7
|
+
*/
|
|
8
|
+
className?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Optionally provide the default value of the `<input>`
|
|
11
|
+
*/
|
|
12
|
+
defaultValue?: string | number;
|
|
13
|
+
/**
|
|
14
|
+
* Specify whether the control is disabled
|
|
15
|
+
*/
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Specify whether to display the character counter
|
|
19
|
+
*/
|
|
20
|
+
enableCounter?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Provide text that is used alongside the control label for additional help
|
|
23
|
+
*/
|
|
24
|
+
helperText?: ReactNodeLike;
|
|
25
|
+
/**
|
|
26
|
+
* Specify whether or not the underlying label is visually hidden
|
|
27
|
+
*/
|
|
28
|
+
hideLabel?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* "Hide password" tooltip text on password visibility toggle
|
|
31
|
+
*/
|
|
32
|
+
hidePasswordLabel?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Provide a unique identifier for the input field
|
|
35
|
+
*/
|
|
36
|
+
id: string;
|
|
37
|
+
/**
|
|
38
|
+
* `true` to use the inline version
|
|
39
|
+
*/
|
|
40
|
+
inline?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Specify whether the control is currently invalid
|
|
43
|
+
*/
|
|
44
|
+
invalid?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Provide the text that is displayed when the control is in an invalid state
|
|
47
|
+
*/
|
|
48
|
+
invalidText?: ReactNodeLike;
|
|
49
|
+
/**
|
|
50
|
+
* Provide the text that will be read by a screen reader when visiting this control
|
|
51
|
+
*/
|
|
52
|
+
labelText: ReactNodeLike;
|
|
53
|
+
/**
|
|
54
|
+
* @deprecated The `light` prop for `PasswordInput` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
|
|
55
|
+
* `true` to use the light version. For use on $ui-01 backgrounds only.
|
|
56
|
+
* Don't use this to make tile background color same as container background color.
|
|
57
|
+
*/
|
|
58
|
+
light?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Max character count allowed for the input. This is needed in order for enableCounter to display
|
|
61
|
+
*/
|
|
62
|
+
maxCount?: number;
|
|
63
|
+
/**
|
|
64
|
+
* Optionally provide an `onChange` handler that is called whenever `<input>` is updated
|
|
65
|
+
* @param evt Change event triggered by `<input>`
|
|
66
|
+
* @returns {void}
|
|
67
|
+
*/
|
|
68
|
+
onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
|
|
69
|
+
/**
|
|
70
|
+
* Optionally provide an `onClick` handler that is called whenever the `<input>` is returned
|
|
71
|
+
* @param evt Mouse event triggered by `<input>`
|
|
72
|
+
* @returns {void}
|
|
73
|
+
*/
|
|
74
|
+
onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
|
|
75
|
+
/**
|
|
76
|
+
* Callback function that is called whenever the toggle password visibility button is clicked
|
|
77
|
+
* @param evt Mouse event triggered by the password visibility `<button>`
|
|
78
|
+
* @returns {void}
|
|
79
|
+
*/
|
|
80
|
+
onTogglePasswordVisibility?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
|
|
81
|
+
/**
|
|
82
|
+
* Specify the placeholder attribute for the `<input>`
|
|
83
|
+
*/
|
|
84
|
+
placeholder?: string;
|
|
85
|
+
/**
|
|
86
|
+
* Whether the input should be read-only
|
|
87
|
+
*/
|
|
88
|
+
readOnly?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* "Show password" tooltip text on password visibility toggle
|
|
91
|
+
*/
|
|
92
|
+
showPasswordLabel?: string;
|
|
93
|
+
/**
|
|
94
|
+
* Specify the size of the Text Input. Supports `sm`, `md`, or `lg`.
|
|
95
|
+
*/
|
|
96
|
+
size?: 'sm' | 'md' | 'lg';
|
|
97
|
+
/**
|
|
98
|
+
* Specify the alignment of the tooltip to the icon-only button.
|
|
99
|
+
* Can be one of: `start`, `center`, or `end`.
|
|
100
|
+
*/
|
|
101
|
+
tooltipAlignment?: 'start' | 'center' | 'end';
|
|
102
|
+
/**
|
|
103
|
+
* Specify the direction of the tooltip for the icon-only button.
|
|
104
|
+
* Can be either `top`, `right`, `bottom`, or `left`
|
|
105
|
+
*/
|
|
106
|
+
tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
|
|
107
|
+
/**
|
|
108
|
+
* The input type, either `password` or `text`
|
|
109
|
+
*/
|
|
110
|
+
type?: 'password' | 'text';
|
|
111
|
+
/**
|
|
112
|
+
* Provide the current value of the `<input>`
|
|
113
|
+
*/
|
|
114
|
+
value?: string | number;
|
|
115
|
+
/**
|
|
116
|
+
* Specify whether the control is currently in warning state
|
|
117
|
+
*/
|
|
118
|
+
warn?: boolean;
|
|
119
|
+
/**
|
|
120
|
+
* Provide the text that is displayed when the control is in warning state
|
|
121
|
+
*/
|
|
122
|
+
warnText?: ReactNodeLike;
|
|
123
|
+
}
|
|
124
|
+
declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<unknown>>;
|
|
125
|
+
export default PasswordInput;
|
|
@@ -14,11 +14,10 @@ import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.
|
|
|
14
14
|
import { textInputProps } from './util.js';
|
|
15
15
|
import '../FluidForm/FluidForm.js';
|
|
16
16
|
import { FormContext } from '../FluidForm/FormContext.js';
|
|
17
|
-
import * as FeatureFlags from '@carbon/feature-flags';
|
|
18
17
|
import deprecate from '../../prop-types/deprecate.js';
|
|
19
18
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
20
19
|
|
|
21
|
-
var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
|
|
20
|
+
var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "readOnly", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
|
|
22
21
|
var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInput(_ref, ref) {
|
|
23
22
|
var _classNames, _classNames2, _classNames3, _classNames4, _classNames7, _classNames8;
|
|
24
23
|
|
|
@@ -42,6 +41,7 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
|
|
|
42
41
|
_onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
|
|
43
42
|
onTogglePasswordVisibility = _ref.onTogglePasswordVisibility,
|
|
44
43
|
placeholder = _ref.placeholder,
|
|
44
|
+
readOnly = _ref.readOnly,
|
|
45
45
|
_ref$size = _ref.size,
|
|
46
46
|
size = _ref$size === void 0 ? 'md' : _ref$size,
|
|
47
47
|
_ref$showPasswordLabe = _ref.showPasswordLabel,
|
|
@@ -52,7 +52,8 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
|
|
|
52
52
|
tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'center' : _ref$tooltipAlignment,
|
|
53
53
|
_ref$type = _ref.type,
|
|
54
54
|
type = _ref$type === void 0 ? 'password' : _ref$type,
|
|
55
|
-
warn = _ref.warn,
|
|
55
|
+
_ref$warn = _ref.warn,
|
|
56
|
+
warn = _ref$warn === void 0 ? false : _ref$warn,
|
|
56
57
|
warnText = _ref.warnText,
|
|
57
58
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
58
59
|
|
|
@@ -67,7 +68,9 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
|
|
|
67
68
|
invalid: invalid,
|
|
68
69
|
invalidText: invalidText,
|
|
69
70
|
warn: warn,
|
|
70
|
-
warnText: warnText
|
|
71
|
+
warnText: warnText,
|
|
72
|
+
readOnly: readOnly,
|
|
73
|
+
disabled: disabled
|
|
71
74
|
});
|
|
72
75
|
|
|
73
76
|
var _useContext = useContext(FormContext),
|
|
@@ -140,6 +143,7 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
|
|
|
140
143
|
useEffect(function () {
|
|
141
144
|
setInputType(type);
|
|
142
145
|
}, [type]);
|
|
146
|
+
var Icon = normalizedProps.icon;
|
|
143
147
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
144
148
|
className: inputWrapperClasses
|
|
145
149
|
}, !inline ? label : /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -149,7 +153,7 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
|
|
|
149
153
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
150
154
|
className: fieldWrapperClasses,
|
|
151
155
|
"data-invalid": normalizedProps.invalid || null
|
|
152
|
-
},
|
|
156
|
+
}, Icon && /*#__PURE__*/React__default.createElement(Icon, {
|
|
153
157
|
className: iconClasses
|
|
154
158
|
}), input, isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
|
|
155
159
|
});
|
|
@@ -249,7 +253,7 @@ PasswordInput.propTypes = {
|
|
|
249
253
|
/**
|
|
250
254
|
* Specify the size of the Text Input. Supports `sm`, `md`, or `lg`.
|
|
251
255
|
*/
|
|
252
|
-
size:
|
|
256
|
+
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
|
253
257
|
|
|
254
258
|
/**
|
|
255
259
|
* Specify the alignment of the tooltip to the icon-only button.
|
|
@@ -17,6 +17,7 @@ var index = require('../Text/index.js');
|
|
|
17
17
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
18
18
|
var iconsReact = require('@carbon/icons-react');
|
|
19
19
|
var mergeRefs = require('../../tools/mergeRefs.js');
|
|
20
|
+
var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
|
|
20
21
|
|
|
21
22
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
22
23
|
|
|
@@ -25,6 +26,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
25
26
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
26
27
|
|
|
27
28
|
var _excluded = ["children", "className", "defaultSelected", "disabled", "helperText", "invalid", "invalidText", "labelPosition", "legendText", "name", "onChange", "orientation", "readOnly", "valueSelected", "warn", "warnText"];
|
|
29
|
+
var getInstanceId = setupGetInstanceId["default"]();
|
|
28
30
|
var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
29
31
|
var _classNames;
|
|
30
32
|
|
|
@@ -62,6 +64,9 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
|
|
|
62
64
|
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
|
63
65
|
prevValueSelected = _useState4[0],
|
|
64
66
|
setPrevValueSelected = _useState4[1];
|
|
67
|
+
|
|
68
|
+
var _useRef = React.useRef(getInstanceId()),
|
|
69
|
+
radioButtonGroupInstanceId = _useRef.current;
|
|
65
70
|
/**
|
|
66
71
|
* prop + state alignment - getDerivedStateFromProps
|
|
67
72
|
* only update if selected prop changes
|
|
@@ -113,7 +118,9 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
|
|
|
113
118
|
var wrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), className);
|
|
114
119
|
var fieldsetClasses = cx__default["default"]("".concat(prefix, "--radio-button-group"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--invalid"), !readOnly && invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--warning"), showWarning), _classNames));
|
|
115
120
|
var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
|
|
121
|
+
var helperId = !helperText ? undefined : "radio-button-group-helper-text-".concat(radioButtonGroupInstanceId);
|
|
116
122
|
var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
123
|
+
id: helperId,
|
|
117
124
|
className: helperClasses
|
|
118
125
|
}, helperText) : null;
|
|
119
126
|
var divRef = React.useRef(null);
|
|
@@ -137,7 +144,7 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
|
|
|
137
144
|
className: "".concat(prefix, "--radio-button__invalid-icon ").concat(prefix, "--radio-button__invalid-icon--warning")
|
|
138
145
|
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
139
146
|
className: "".concat(prefix, "--form-requirement")
|
|
140
|
-
}, warnText)), showHelper && helper)
|
|
147
|
+
}, warnText))), showHelper && helper);
|
|
141
148
|
});
|
|
142
149
|
RadioButtonGroup.propTypes = {
|
|
143
150
|
/**
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import React, { InputHTMLAttributes } from 'react';
|
|
2
|
+
import { ReactNodeLike } from 'prop-types';
|
|
3
|
+
type ExcludedAttributes = 'size';
|
|
4
|
+
export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
|
|
5
|
+
/**
|
|
6
|
+
* Provide a custom className that is applied directly to the underlyling `<input>` node
|
|
7
|
+
*/
|
|
8
|
+
className?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Optionally provide the default value of the `<input>`
|
|
11
|
+
*/
|
|
12
|
+
defaultValue?: string | number;
|
|
13
|
+
/**
|
|
14
|
+
* Specify whether the control is disabled
|
|
15
|
+
*/
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Specify whether to display the character counter
|
|
19
|
+
*/
|
|
20
|
+
enableCounter?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Provide text that is used alongside the control label for additional help
|
|
23
|
+
*/
|
|
24
|
+
helperText?: ReactNodeLike;
|
|
25
|
+
/**
|
|
26
|
+
* Specify whether or not the underlying label is visually hidden
|
|
27
|
+
*/
|
|
28
|
+
hideLabel?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* "Hide password" tooltip text on password visibility toggle
|
|
31
|
+
*/
|
|
32
|
+
hidePasswordLabel?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Provide a unique identifier for the input field
|
|
35
|
+
*/
|
|
36
|
+
id: string;
|
|
37
|
+
/**
|
|
38
|
+
* `true` to use the inline version
|
|
39
|
+
*/
|
|
40
|
+
inline?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Specify whether the control is currently invalid
|
|
43
|
+
*/
|
|
44
|
+
invalid?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Provide the text that is displayed when the control is in an invalid state
|
|
47
|
+
*/
|
|
48
|
+
invalidText?: ReactNodeLike;
|
|
49
|
+
/**
|
|
50
|
+
* Provide the text that will be read by a screen reader when visiting this control
|
|
51
|
+
*/
|
|
52
|
+
labelText: ReactNodeLike;
|
|
53
|
+
/**
|
|
54
|
+
* @deprecated The `light` prop for `PasswordInput` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
|
|
55
|
+
* `true` to use the light version. For use on $ui-01 backgrounds only.
|
|
56
|
+
* Don't use this to make tile background color same as container background color.
|
|
57
|
+
*/
|
|
58
|
+
light?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Max character count allowed for the input. This is needed in order for enableCounter to display
|
|
61
|
+
*/
|
|
62
|
+
maxCount?: number;
|
|
63
|
+
/**
|
|
64
|
+
* Optionally provide an `onChange` handler that is called whenever `<input>` is updated
|
|
65
|
+
* @param evt Change event triggered by `<input>`
|
|
66
|
+
* @returns {void}
|
|
67
|
+
*/
|
|
68
|
+
onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
|
|
69
|
+
/**
|
|
70
|
+
* Optionally provide an `onClick` handler that is called whenever the `<input>` is returned
|
|
71
|
+
* @param evt Mouse event triggered by `<input>`
|
|
72
|
+
* @returns {void}
|
|
73
|
+
*/
|
|
74
|
+
onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
|
|
75
|
+
/**
|
|
76
|
+
* Callback function that is called whenever the toggle password visibility button is clicked
|
|
77
|
+
* @param evt Mouse event triggered by the password visibility `<button>`
|
|
78
|
+
* @returns {void}
|
|
79
|
+
*/
|
|
80
|
+
onTogglePasswordVisibility?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
|
|
81
|
+
/**
|
|
82
|
+
* Specify the placeholder attribute for the `<input>`
|
|
83
|
+
*/
|
|
84
|
+
placeholder?: string;
|
|
85
|
+
/**
|
|
86
|
+
* Whether the input should be read-only
|
|
87
|
+
*/
|
|
88
|
+
readOnly?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* "Show password" tooltip text on password visibility toggle
|
|
91
|
+
*/
|
|
92
|
+
showPasswordLabel?: string;
|
|
93
|
+
/**
|
|
94
|
+
* Specify the size of the Text Input. Supports `sm`, `md`, or `lg`.
|
|
95
|
+
*/
|
|
96
|
+
size?: 'sm' | 'md' | 'lg';
|
|
97
|
+
/**
|
|
98
|
+
* Specify the alignment of the tooltip to the icon-only button.
|
|
99
|
+
* Can be one of: `start`, `center`, or `end`.
|
|
100
|
+
*/
|
|
101
|
+
tooltipAlignment?: 'start' | 'center' | 'end';
|
|
102
|
+
/**
|
|
103
|
+
* Specify the direction of the tooltip for the icon-only button.
|
|
104
|
+
* Can be either `top`, `right`, `bottom`, or `left`
|
|
105
|
+
*/
|
|
106
|
+
tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
|
|
107
|
+
/**
|
|
108
|
+
* The input type, either `password` or `text`
|
|
109
|
+
*/
|
|
110
|
+
type?: 'password' | 'text';
|
|
111
|
+
/**
|
|
112
|
+
* Provide the current value of the `<input>`
|
|
113
|
+
*/
|
|
114
|
+
value?: string | number;
|
|
115
|
+
/**
|
|
116
|
+
* Specify whether the control is currently in warning state
|
|
117
|
+
*/
|
|
118
|
+
warn?: boolean;
|
|
119
|
+
/**
|
|
120
|
+
* Provide the text that is displayed when the control is in warning state
|
|
121
|
+
*/
|
|
122
|
+
warnText?: ReactNodeLike;
|
|
123
|
+
}
|
|
124
|
+
declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<unknown>>;
|
|
125
|
+
export default PasswordInput;
|
|
@@ -18,36 +18,16 @@ var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js
|
|
|
18
18
|
var util = require('./util.js');
|
|
19
19
|
require('../FluidForm/FluidForm.js');
|
|
20
20
|
var FormContext = require('../FluidForm/FormContext.js');
|
|
21
|
-
var FeatureFlags = require('@carbon/feature-flags');
|
|
22
21
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
23
22
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
24
23
|
|
|
25
24
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
26
25
|
|
|
27
|
-
function _interopNamespace(e) {
|
|
28
|
-
if (e && e.__esModule) return e;
|
|
29
|
-
var n = Object.create(null);
|
|
30
|
-
if (e) {
|
|
31
|
-
Object.keys(e).forEach(function (k) {
|
|
32
|
-
if (k !== 'default') {
|
|
33
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
34
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
35
|
-
enumerable: true,
|
|
36
|
-
get: function () { return e[k]; }
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
n["default"] = e;
|
|
42
|
-
return Object.freeze(n);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
26
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
46
27
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
47
28
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
48
|
-
var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
|
|
49
29
|
|
|
50
|
-
var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
|
|
30
|
+
var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "readOnly", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
|
|
51
31
|
var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function PasswordInput(_ref, ref) {
|
|
52
32
|
var _classNames, _classNames2, _classNames3, _classNames4, _classNames7, _classNames8;
|
|
53
33
|
|
|
@@ -71,6 +51,7 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
|
|
|
71
51
|
_onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
|
|
72
52
|
onTogglePasswordVisibility = _ref.onTogglePasswordVisibility,
|
|
73
53
|
placeholder = _ref.placeholder,
|
|
54
|
+
readOnly = _ref.readOnly,
|
|
74
55
|
_ref$size = _ref.size,
|
|
75
56
|
size = _ref$size === void 0 ? 'md' : _ref$size,
|
|
76
57
|
_ref$showPasswordLabe = _ref.showPasswordLabel,
|
|
@@ -81,7 +62,8 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
|
|
|
81
62
|
tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'center' : _ref$tooltipAlignment,
|
|
82
63
|
_ref$type = _ref.type,
|
|
83
64
|
type = _ref$type === void 0 ? 'password' : _ref$type,
|
|
84
|
-
warn = _ref.warn,
|
|
65
|
+
_ref$warn = _ref.warn,
|
|
66
|
+
warn = _ref$warn === void 0 ? false : _ref$warn,
|
|
85
67
|
warnText = _ref.warnText,
|
|
86
68
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
87
69
|
|
|
@@ -96,7 +78,9 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
|
|
|
96
78
|
invalid: invalid,
|
|
97
79
|
invalidText: invalidText,
|
|
98
80
|
warn: warn,
|
|
99
|
-
warnText: warnText
|
|
81
|
+
warnText: warnText,
|
|
82
|
+
readOnly: readOnly,
|
|
83
|
+
disabled: disabled
|
|
100
84
|
});
|
|
101
85
|
|
|
102
86
|
var _useContext = React.useContext(FormContext.FormContext),
|
|
@@ -169,6 +153,7 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
|
|
|
169
153
|
React.useEffect(function () {
|
|
170
154
|
setInputType(type);
|
|
171
155
|
}, [type]);
|
|
156
|
+
var Icon = normalizedProps.icon;
|
|
172
157
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
173
158
|
className: inputWrapperClasses
|
|
174
159
|
}, !inline ? label : /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -178,7 +163,7 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
|
|
|
178
163
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
179
164
|
className: fieldWrapperClasses,
|
|
180
165
|
"data-invalid": normalizedProps.invalid || null
|
|
181
|
-
},
|
|
166
|
+
}, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
182
167
|
className: iconClasses
|
|
183
168
|
}), input, isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
|
|
184
169
|
});
|
|
@@ -278,7 +263,7 @@ PasswordInput.propTypes = {
|
|
|
278
263
|
/**
|
|
279
264
|
* Specify the size of the Text Input. Supports `sm`, `md`, or `lg`.
|
|
280
265
|
*/
|
|
281
|
-
size:
|
|
266
|
+
size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
|
|
282
267
|
|
|
283
268
|
/**
|
|
284
269
|
* Specify the alignment of the tooltip to the icon-only button.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/react",
|
|
3
3
|
"description": "React components for the Carbon Design System",
|
|
4
|
-
"version": "1.26.0
|
|
4
|
+
"version": "1.26.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@carbon/feature-flags": "^0.13.0",
|
|
47
47
|
"@carbon/icons-react": "^11.17.0",
|
|
48
48
|
"@carbon/layout": "^11.12.0",
|
|
49
|
-
"@carbon/styles": "^1.26.0
|
|
49
|
+
"@carbon/styles": "^1.26.0",
|
|
50
50
|
"@carbon/telemetry": "0.1.0",
|
|
51
51
|
"classnames": "2.3.2",
|
|
52
52
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -133,5 +133,5 @@
|
|
|
133
133
|
"**/*.scss",
|
|
134
134
|
"**/*.css"
|
|
135
135
|
],
|
|
136
|
-
"gitHead": "
|
|
136
|
+
"gitHead": "a95ac1dfed8959765c963e5dbec340694cb60b57"
|
|
137
137
|
}
|