@datarobot/design-system 29.5.0 → 29.6.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/cjs/key-value-pairs/key-value-inputs.d.ts +2 -1
- package/cjs/key-value-pairs/key-value-inputs.js +5 -3
- package/cjs/key-value-pairs/key-value-pairs.d.ts +3 -1
- package/cjs/key-value-pairs/key-value-pairs.js +2 -0
- package/esm/key-value-pairs/key-value-inputs.d.ts +2 -1
- package/esm/key-value-pairs/key-value-inputs.js +5 -3
- package/esm/key-value-pairs/key-value-pairs.d.ts +3 -1
- package/esm/key-value-pairs/key-value-pairs.js +2 -0
- package/js/bundle/bundle.js +7 -3
- package/js/bundle/bundle.min.js +1 -1
- package/js/bundle/index.d.ts +3 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { MouseEvent } from 'react';
|
|
2
|
-
import { Item } from './types';
|
|
2
|
+
import { Item, ValueObject } from './types';
|
|
3
3
|
import { FormFieldValidity } from '../form-field/validity-shape';
|
|
4
4
|
type OnChangeEvent = Item;
|
|
5
5
|
type KeyValueInputsProps = {
|
|
@@ -9,6 +9,7 @@ type KeyValueInputsProps = {
|
|
|
9
9
|
value?: string | number;
|
|
10
10
|
/** True to disable inputs, false to enable inputs */
|
|
11
11
|
isDisabled?: boolean;
|
|
12
|
+
disabledPairs?: ValueObject;
|
|
12
13
|
/** Change handler */
|
|
13
14
|
onChange?: (event: OnChangeEvent) => void;
|
|
14
15
|
/** Delete handler */
|
|
@@ -23,6 +23,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
|
|
|
23
23
|
name,
|
|
24
24
|
value = '',
|
|
25
25
|
isDisabled = false,
|
|
26
|
+
disabledPairs,
|
|
26
27
|
onChange = () => {},
|
|
27
28
|
onDelete = () => {},
|
|
28
29
|
validity = {},
|
|
@@ -40,6 +41,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
|
|
|
40
41
|
id,
|
|
41
42
|
validationValues
|
|
42
43
|
});
|
|
44
|
+
const disabled = isDisabled || disabledPairs?.[name] !== undefined && disabledPairs[name] === value;
|
|
43
45
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
44
46
|
className: "kvp-inputs",
|
|
45
47
|
"test-id": "kvp-inputs",
|
|
@@ -48,7 +50,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
|
|
|
48
50
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.Input, {
|
|
49
51
|
type: _formField.INPUT_TYPES.TEXT,
|
|
50
52
|
value: name,
|
|
51
|
-
isDisabled:
|
|
53
|
+
isDisabled: disabled,
|
|
52
54
|
onChange: ({
|
|
53
55
|
target
|
|
54
56
|
}) => onChange({
|
|
@@ -67,7 +69,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
|
|
|
67
69
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.Input, {
|
|
68
70
|
type: _formField.INPUT_TYPES.TEXT,
|
|
69
71
|
value: value,
|
|
70
|
-
isDisabled:
|
|
72
|
+
isDisabled: disabled,
|
|
71
73
|
onChange: ({
|
|
72
74
|
target
|
|
73
75
|
}) => onChange({
|
|
@@ -85,7 +87,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
|
|
|
85
87
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
|
|
86
88
|
accentType: _button.ACCENT_TYPES.ROUND_ICON,
|
|
87
89
|
onClick: onDelete,
|
|
88
|
-
isDisabled:
|
|
90
|
+
isDisabled: disabled,
|
|
89
91
|
testId: "kvp-delete-button",
|
|
90
92
|
"aria-label": deleteKeyValueText,
|
|
91
93
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
|
|
@@ -8,7 +8,9 @@ type KeyValuePairsProps = {
|
|
|
8
8
|
/** Object that represents the key value pairs in this component */
|
|
9
9
|
value: ValueObject;
|
|
10
10
|
className?: string;
|
|
11
|
+
/** whether whole form is disabled */
|
|
11
12
|
isDisabled?: boolean;
|
|
13
|
+
disabledPairs?: ValueObject;
|
|
12
14
|
label?: string;
|
|
13
15
|
/** Label for the key column */
|
|
14
16
|
keyLabel?: string;
|
|
@@ -54,5 +56,5 @@ type KeyValuePairsProps = {
|
|
|
54
56
|
@midnight-gray-supported
|
|
55
57
|
@alpine-light-supported
|
|
56
58
|
*/
|
|
57
|
-
export declare const KeyValuePairs: ({ value, className, label, keyLabel, valueLabel, helperText, placeholder: placeholderParams, isDisabled, onChange, hasWarning, emptyCheck, warningMessage: warningMessageParams, buttonText: buttonTextParams, maxItemsTooltipText: maxItemsTooltipTextParams, emptyItemErrorText: emptyItemErrorTextParams, deleteKeyValueText: deleteKeyValueTextParams, buildDuplicateItemErrorText: buildDuplicateItemErrorTextParams, testId, infoIconProps, onError, maxSize, addButtonAccentType, keyInputAriaLabel: keyInputAriaLabelParams, valueInputAriaLabel: valueInputAriaLabelParams, id, }: KeyValuePairsProps) => import("react/jsx-runtime").JSX.Element;
|
|
59
|
+
export declare const KeyValuePairs: ({ value, className, label, keyLabel, valueLabel, helperText, placeholder: placeholderParams, isDisabled, disabledPairs, onChange, hasWarning, emptyCheck, warningMessage: warningMessageParams, buttonText: buttonTextParams, maxItemsTooltipText: maxItemsTooltipTextParams, emptyItemErrorText: emptyItemErrorTextParams, deleteKeyValueText: deleteKeyValueTextParams, buildDuplicateItemErrorText: buildDuplicateItemErrorTextParams, testId, infoIconProps, onError, maxSize, addButtonAccentType, keyInputAriaLabel: keyInputAriaLabelParams, valueInputAriaLabel: valueInputAriaLabelParams, id, }: KeyValuePairsProps) => import("react/jsx-runtime").JSX.Element;
|
|
58
60
|
export {};
|
|
@@ -65,6 +65,7 @@ const KeyValuePairs = ({
|
|
|
65
65
|
helperText = '',
|
|
66
66
|
placeholder: placeholderParams,
|
|
67
67
|
isDisabled = false,
|
|
68
|
+
disabledPairs,
|
|
68
69
|
onChange = () => {},
|
|
69
70
|
hasWarning = false,
|
|
70
71
|
emptyCheck = false,
|
|
@@ -197,6 +198,7 @@ const KeyValuePairs = ({
|
|
|
197
198
|
name: item.name,
|
|
198
199
|
value: item.value,
|
|
199
200
|
isDisabled: isDisabled,
|
|
201
|
+
disabledPairs: disabledPairs,
|
|
200
202
|
onChange: updatedOption => changeItem(index, updatedOption),
|
|
201
203
|
onDelete: () => removeItem(index),
|
|
202
204
|
deleteKeyValueText: `${deleteKeyValueText} ${paddedIndex}`,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { MouseEvent } from 'react';
|
|
2
|
-
import { Item } from './types';
|
|
2
|
+
import { Item, ValueObject } from './types';
|
|
3
3
|
import { FormFieldValidity } from '../form-field/validity-shape';
|
|
4
4
|
type OnChangeEvent = Item;
|
|
5
5
|
type KeyValueInputsProps = {
|
|
@@ -9,6 +9,7 @@ type KeyValueInputsProps = {
|
|
|
9
9
|
value?: string | number;
|
|
10
10
|
/** True to disable inputs, false to enable inputs */
|
|
11
11
|
isDisabled?: boolean;
|
|
12
|
+
disabledPairs?: ValueObject;
|
|
12
13
|
/** Change handler */
|
|
13
14
|
onChange?: (event: OnChangeEvent) => void;
|
|
14
15
|
/** Delete handler */
|
|
@@ -16,6 +16,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
16
16
|
name,
|
|
17
17
|
value = '',
|
|
18
18
|
isDisabled = false,
|
|
19
|
+
disabledPairs,
|
|
19
20
|
onChange = () => {},
|
|
20
21
|
onDelete = () => {},
|
|
21
22
|
validity = {},
|
|
@@ -33,6 +34,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
33
34
|
id,
|
|
34
35
|
validationValues
|
|
35
36
|
});
|
|
37
|
+
const disabled = isDisabled || disabledPairs?.[name] !== undefined && disabledPairs[name] === value;
|
|
36
38
|
return /*#__PURE__*/_jsxs("div", {
|
|
37
39
|
className: "kvp-inputs",
|
|
38
40
|
"test-id": "kvp-inputs",
|
|
@@ -41,7 +43,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
41
43
|
children: /*#__PURE__*/_jsx(Input, {
|
|
42
44
|
type: INPUT_TYPES.TEXT,
|
|
43
45
|
value: name,
|
|
44
|
-
isDisabled:
|
|
46
|
+
isDisabled: disabled,
|
|
45
47
|
onChange: ({
|
|
46
48
|
target
|
|
47
49
|
}) => onChange({
|
|
@@ -60,7 +62,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
60
62
|
children: /*#__PURE__*/_jsx(Input, {
|
|
61
63
|
type: INPUT_TYPES.TEXT,
|
|
62
64
|
value: value,
|
|
63
|
-
isDisabled:
|
|
65
|
+
isDisabled: disabled,
|
|
64
66
|
onChange: ({
|
|
65
67
|
target
|
|
66
68
|
}) => onChange({
|
|
@@ -78,7 +80,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
78
80
|
children: /*#__PURE__*/_jsx(Button, {
|
|
79
81
|
accentType: ACCENT_TYPES.ROUND_ICON,
|
|
80
82
|
onClick: onDelete,
|
|
81
|
-
isDisabled:
|
|
83
|
+
isDisabled: disabled,
|
|
82
84
|
testId: "kvp-delete-button",
|
|
83
85
|
"aria-label": deleteKeyValueText,
|
|
84
86
|
children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
|
|
@@ -8,7 +8,9 @@ type KeyValuePairsProps = {
|
|
|
8
8
|
/** Object that represents the key value pairs in this component */
|
|
9
9
|
value: ValueObject;
|
|
10
10
|
className?: string;
|
|
11
|
+
/** whether whole form is disabled */
|
|
11
12
|
isDisabled?: boolean;
|
|
13
|
+
disabledPairs?: ValueObject;
|
|
12
14
|
label?: string;
|
|
13
15
|
/** Label for the key column */
|
|
14
16
|
keyLabel?: string;
|
|
@@ -54,5 +56,5 @@ type KeyValuePairsProps = {
|
|
|
54
56
|
@midnight-gray-supported
|
|
55
57
|
@alpine-light-supported
|
|
56
58
|
*/
|
|
57
|
-
export declare const KeyValuePairs: ({ value, className, label, keyLabel, valueLabel, helperText, placeholder: placeholderParams, isDisabled, onChange, hasWarning, emptyCheck, warningMessage: warningMessageParams, buttonText: buttonTextParams, maxItemsTooltipText: maxItemsTooltipTextParams, emptyItemErrorText: emptyItemErrorTextParams, deleteKeyValueText: deleteKeyValueTextParams, buildDuplicateItemErrorText: buildDuplicateItemErrorTextParams, testId, infoIconProps, onError, maxSize, addButtonAccentType, keyInputAriaLabel: keyInputAriaLabelParams, valueInputAriaLabel: valueInputAriaLabelParams, id, }: KeyValuePairsProps) => import("react/jsx-runtime").JSX.Element;
|
|
59
|
+
export declare const KeyValuePairs: ({ value, className, label, keyLabel, valueLabel, helperText, placeholder: placeholderParams, isDisabled, disabledPairs, onChange, hasWarning, emptyCheck, warningMessage: warningMessageParams, buttonText: buttonTextParams, maxItemsTooltipText: maxItemsTooltipTextParams, emptyItemErrorText: emptyItemErrorTextParams, deleteKeyValueText: deleteKeyValueTextParams, buildDuplicateItemErrorText: buildDuplicateItemErrorTextParams, testId, infoIconProps, onError, maxSize, addButtonAccentType, keyInputAriaLabel: keyInputAriaLabelParams, valueInputAriaLabel: valueInputAriaLabelParams, id, }: KeyValuePairsProps) => import("react/jsx-runtime").JSX.Element;
|
|
58
60
|
export {};
|
|
@@ -57,6 +57,7 @@ export const KeyValuePairs = ({
|
|
|
57
57
|
helperText = '',
|
|
58
58
|
placeholder: placeholderParams,
|
|
59
59
|
isDisabled = false,
|
|
60
|
+
disabledPairs,
|
|
60
61
|
onChange = () => {},
|
|
61
62
|
hasWarning = false,
|
|
62
63
|
emptyCheck = false,
|
|
@@ -189,6 +190,7 @@ export const KeyValuePairs = ({
|
|
|
189
190
|
name: item.name,
|
|
190
191
|
value: item.value,
|
|
191
192
|
isDisabled: isDisabled,
|
|
193
|
+
disabledPairs: disabledPairs,
|
|
192
194
|
onChange: updatedOption => changeItem(index, updatedOption),
|
|
193
195
|
onDelete: () => removeItem(index),
|
|
194
196
|
deleteKeyValueText: `${deleteKeyValueText} ${paddedIndex}`,
|
package/js/bundle/bundle.js
CHANGED
|
@@ -66670,6 +66670,7 @@ var KeyValueInputs = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
|
|
|
66670
66670
|
value = _props$value === void 0 ? '' : _props$value,
|
|
66671
66671
|
_props$isDisabled = props.isDisabled,
|
|
66672
66672
|
isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
|
|
66673
|
+
disabledPairs = props.disabledPairs,
|
|
66673
66674
|
_props$onChange = props.onChange,
|
|
66674
66675
|
_onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
|
|
66675
66676
|
_props$onDelete = props.onDelete,
|
|
@@ -66689,6 +66690,7 @@ var KeyValueInputs = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
|
|
|
66689
66690
|
id: id,
|
|
66690
66691
|
validationValues: validationValues
|
|
66691
66692
|
});
|
|
66693
|
+
var disabled = isDisabled || (disabledPairs === null || disabledPairs === void 0 ? void 0 : disabledPairs[name]) !== undefined && disabledPairs[name] === value;
|
|
66692
66694
|
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
66693
66695
|
className: "kvp-inputs",
|
|
66694
66696
|
"test-id": "kvp-inputs"
|
|
@@ -66697,7 +66699,7 @@ var KeyValueInputs = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
|
|
|
66697
66699
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_input__WEBPACK_IMPORTED_MODULE_3__.Input, _extends({
|
|
66698
66700
|
type: _form_field__WEBPACK_IMPORTED_MODULE_5__.INPUT_TYPES.TEXT,
|
|
66699
66701
|
value: name,
|
|
66700
|
-
isDisabled:
|
|
66702
|
+
isDisabled: disabled,
|
|
66701
66703
|
onChange: function onChange(_ref) {
|
|
66702
66704
|
var target = _ref.target;
|
|
66703
66705
|
return _onChange({
|
|
@@ -66715,7 +66717,7 @@ var KeyValueInputs = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
|
|
|
66715
66717
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_input__WEBPACK_IMPORTED_MODULE_3__.Input, _extends({
|
|
66716
66718
|
type: _form_field__WEBPACK_IMPORTED_MODULE_5__.INPUT_TYPES.TEXT,
|
|
66717
66719
|
value: value,
|
|
66718
|
-
isDisabled:
|
|
66720
|
+
isDisabled: disabled,
|
|
66719
66721
|
onChange: function onChange(_ref2) {
|
|
66720
66722
|
var target = _ref2.target;
|
|
66721
66723
|
return _onChange({
|
|
@@ -66732,7 +66734,7 @@ var KeyValueInputs = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
|
|
|
66732
66734
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_button__WEBPACK_IMPORTED_MODULE_4__.Button, {
|
|
66733
66735
|
accentType: _button__WEBPACK_IMPORTED_MODULE_4__.ACCENT_TYPES.ROUND_ICON,
|
|
66734
66736
|
onClick: onDelete,
|
|
66735
|
-
isDisabled:
|
|
66737
|
+
isDisabled: disabled,
|
|
66736
66738
|
testId: "kvp-delete-button",
|
|
66737
66739
|
"aria-label": deleteKeyValueText
|
|
66738
66740
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_font_awesome_icon__WEBPACK_IMPORTED_MODULE_2__.FontAwesomeIcon, {
|
|
@@ -66868,6 +66870,7 @@ var KeyValuePairs = function KeyValuePairs(_ref5) {
|
|
|
66868
66870
|
placeholderParams = _ref5.placeholder,
|
|
66869
66871
|
_ref5$isDisabled = _ref5.isDisabled,
|
|
66870
66872
|
isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled,
|
|
66873
|
+
disabledPairs = _ref5.disabledPairs,
|
|
66871
66874
|
_ref5$onChange = _ref5.onChange,
|
|
66872
66875
|
onChange = _ref5$onChange === void 0 ? function () {} : _ref5$onChange,
|
|
66873
66876
|
_ref5$hasWarning = _ref5.hasWarning,
|
|
@@ -67014,6 +67017,7 @@ var KeyValuePairs = function KeyValuePairs(_ref5) {
|
|
|
67014
67017
|
name: item.name,
|
|
67015
67018
|
value: item.value,
|
|
67016
67019
|
isDisabled: isDisabled,
|
|
67020
|
+
disabledPairs: disabledPairs,
|
|
67017
67021
|
onChange: function onChange(updatedOption) {
|
|
67018
67022
|
return changeItem(index, updatedOption);
|
|
67019
67023
|
},
|