@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.
@@ -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: 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: 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: 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: 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: 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: 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}`,
@@ -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: 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: 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: 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
  },