@datarobot/design-system 29.4.1 → 29.6.0

package/cjs/chart-legend/chart-legend-item.d.ts

@@ -1,9 +1,11 @@
-import { ChartLegendItemType, OnChangeHandler } from './types';
+import { ChartLegendItemType, OnChangeHandler, OnMouseEnterHandler, OnMouseLeaveHandler } from './types';
 import './chart-legend-item.less';
 type ChartLegendItemProps = {
     item: ChartLegendItemType;
     isInteractive?: boolean;
     onChange?: OnChangeHandler;
+    onMouseEnter?: OnMouseEnterHandler;
+    onMouseLeave?: OnMouseLeaveHandler;
 };
-export declare function ChartLegendItem({ item, isInteractive, onChange, }: ChartLegendItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartLegendItem({ item, isInteractive, onChange, onMouseEnter, onMouseLeave, }: ChartLegendItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/cjs/chart-legend/chart-legend-item.js

@@ -13,7 +13,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function ChartLegendItem({
   item,
   isInteractive = false,
-  onChange = () => {}
+  onChange = () => {},
+  onMouseEnter = () => {},
+  onMouseLeave = () => {}
 }) {
   const {
     key,
@@ -27,25 +29,31 @@ function ChartLegendItem({
     isDisabled
   } = item;
   const id = `legend-item-${key}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
-    content: tooltipText,
-    placement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)('chart-legend-item', className),
-      "test-id": testId,
-      children: [isInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-        onChange: e => isDisabled ? null : onChange({
-          item,
-          isActive: e.target.checked
-        }),
-        id: id,
-        "test-id": "chart-legend-item-input",
-        type: "checkbox",
-        checked: isActive,
-        value: key,
-        className: "chart-legend-item-checkbox",
-        disabled: isDisabled
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('chart-legend-item', className),
+    "test-id": testId,
+    onMouseEnter: () => onMouseEnter({
+      item
+    }),
+    onMouseLeave: () => onMouseLeave({
+      item
+    }),
+    children: [isInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      onChange: e => isDisabled ? null : onChange({
+        item,
+        isActive: e.target.checked
+      }),
+      id: id,
+      "test-id": "chart-legend-item-input",
+      type: "checkbox",
+      checked: isActive,
+      value: key,
+      className: "chart-legend-item-checkbox",
+      disabled: isDisabled
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+      content: tooltipText,
+      placement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
         htmlFor: id,
         className: "chart-legend-item-label",
         "aria-labelledby": `${id}-glyph ${id}-label`,
@@ -60,7 +68,7 @@ function ChartLegendItem({
           id: `${id}-label`,
           children: label
         })]
-      })]
-    })
+      })
+    })]
   });
 }

package/cjs/chart-legend/chart-legend.d.ts

@@ -1,4 +1,4 @@
-import { ChartLegendItemType, OnChangeHandler } from './types';
+import { ChartLegendItemType, OnChangeHandler, OnMouseEnterHandler, OnMouseLeaveHandler } from './types';
 import './chart-legend.less';
 type ChartLegendProps = {
     className?: string;
@@ -7,11 +7,13 @@ type ChartLegendProps = {
     /** if true, legend items will become clickable */
     isInteractive?: boolean;
     onChange?: OnChangeHandler;
+    onMouseEnter?: OnMouseEnterHandler;
+    onMouseLeave?: OnMouseLeaveHandler;
 };
 /**
  * Legends for charts
  * @midnight-gray-supported
  * @alpine-light-supported
  */
-export declare function ChartLegend({ className, items, isInteractive, onChange, testId, }: ChartLegendProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartLegend({ className, items, isInteractive, onChange, onMouseEnter, onMouseLeave, testId, }: ChartLegendProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/cjs/chart-legend/chart-legend.js

@@ -19,6 +19,8 @@ function ChartLegend({
   items,
   isInteractive,
   onChange,
+  onMouseEnter,
+  onMouseLeave,
   testId
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -28,7 +30,9 @@ function ChartLegend({
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chartLegendItem.ChartLegendItem, {
         item: item,
         isInteractive: isInteractive,
-        onChange: onChange
+        onChange: onChange,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
       }, item.key);
     })
   });

package/cjs/chart-legend/types.d.ts

@@ -16,3 +16,8 @@ export type OnChangeHandlerEvent = {
     isActive: boolean;
 };
 export type OnChangeHandler = (event: OnChangeHandlerEvent) => void;
+export type OnMouseOverHandlerEvent = {
+    item: ChartLegendItemType;
+};
+export type OnMouseEnterHandler = (event: OnMouseOverHandlerEvent) => void;
+export type OnMouseLeaveHandler = (event: OnMouseOverHandlerEvent) => void;

package/cjs/key-value-pairs/key-value-inputs.d.ts

@@ -1,5 +1,5 @@
 import React, { MouseEvent } from 'react';
-import { Item } from './types';
+import { Item, ValueObject } from './types';
 import { FormFieldValidity } from '../form-field/validity-shape';
 type OnChangeEvent = Item;
 type KeyValueInputsProps = {
@@ -9,6 +9,7 @@ type KeyValueInputsProps = {
     value?: string | number;
     /** True to disable inputs, false to enable inputs */
     isDisabled?: boolean;
+    disabledPairs?: ValueObject;
     /** Change handler */
     onChange?: (event: OnChangeEvent) => void;
     /** Delete handler */

package/cjs/key-value-pairs/key-value-inputs.js

@@ -23,6 +23,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
     name,
     value = '',
     isDisabled = false,
+    disabledPairs,
     onChange = () => {},
     onDelete = () => {},
     validity = {},
@@ -40,6 +41,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
     id,
     validationValues
   });
+  const disabled = isDisabled || disabledPairs?.[name] !== undefined && disabledPairs[name] === value;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "kvp-inputs",
     "test-id": "kvp-inputs",
@@ -48,7 +50,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.Input, {
         type: _formField.INPUT_TYPES.TEXT,
         value: name,
-        isDisabled: isDisabled,
+        isDisabled: disabled,
         onChange: ({
           target
         }) => onChange({
@@ -67,7 +69,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.Input, {
         type: _formField.INPUT_TYPES.TEXT,
         value: value,
-        isDisabled: isDisabled,
+        isDisabled: disabled,
         onChange: ({
           target
         }) => onChange({
@@ -85,7 +87,7 @@ const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardR
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
         accentType: _button.ACCENT_TYPES.ROUND_ICON,
         onClick: onDelete,
-        isDisabled: isDisabled,
+        isDisabled: disabled,
         testId: "kvp-delete-button",
         "aria-label": deleteKeyValueText,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {

package/cjs/key-value-pairs/key-value-pairs.d.ts

@@ -8,7 +8,9 @@ type KeyValuePairsProps = {
     /** Object that represents the key value pairs in this component */
     value: ValueObject;
     className?: string;
+    /** whether whole form is disabled */
     isDisabled?: boolean;
+    disabledPairs?: ValueObject;
     label?: string;
     /** Label for the key column */
     keyLabel?: string;
@@ -54,5 +56,5 @@ type KeyValuePairsProps = {
     @midnight-gray-supported
     @alpine-light-supported
  */
-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;
+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;
 export {};

package/cjs/key-value-pairs/key-value-pairs.js

@@ -65,6 +65,7 @@ const KeyValuePairs = ({
   helperText = '',
   placeholder: placeholderParams,
   isDisabled = false,
+  disabledPairs,
   onChange = () => {},
   hasWarning = false,
   emptyCheck = false,
@@ -197,6 +198,7 @@ const KeyValuePairs = ({
         name: item.name,
         value: item.value,
         isDisabled: isDisabled,
+        disabledPairs: disabledPairs,
         onChange: updatedOption => changeItem(index, updatedOption),
         onDelete: () => removeItem(index),
         deleteKeyValueText: `${deleteKeyValueText} ${paddedIndex}`,

package/esm/chart-legend/chart-legend-item.d.ts

@@ -1,9 +1,11 @@
-import { ChartLegendItemType, OnChangeHandler } from './types';
+import { ChartLegendItemType, OnChangeHandler, OnMouseEnterHandler, OnMouseLeaveHandler } from './types';
 import './chart-legend-item.less';
 type ChartLegendItemProps = {
     item: ChartLegendItemType;
     isInteractive?: boolean;
     onChange?: OnChangeHandler;
+    onMouseEnter?: OnMouseEnterHandler;
+    onMouseLeave?: OnMouseLeaveHandler;
 };
-export declare function ChartLegendItem({ item, isInteractive, onChange, }: ChartLegendItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartLegendItem({ item, isInteractive, onChange, onMouseEnter, onMouseLeave, }: ChartLegendItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/chart-legend/chart-legend-item.js

@@ -6,7 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ChartLegendItem({
   item,
   isInteractive = false,
-  onChange = () => {}
+  onChange = () => {},
+  onMouseEnter = () => {},
+  onMouseLeave = () => {}
 }) {
   const {
     key,
@@ -20,25 +22,31 @@ export function ChartLegendItem({
     isDisabled
   } = item;
   const id = `legend-item-${key}`;
-  return /*#__PURE__*/_jsx(Tooltip, {
-    content: tooltipText,
-    placement: TOOLTIP_PLACEMENT_TYPES.TOP,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: classnames('chart-legend-item', className),
-      "test-id": testId,
-      children: [isInteractive ? /*#__PURE__*/_jsx("input", {
-        onChange: e => isDisabled ? null : onChange({
-          item,
-          isActive: e.target.checked
-        }),
-        id: id,
-        "test-id": "chart-legend-item-input",
-        type: "checkbox",
-        checked: isActive,
-        value: key,
-        className: "chart-legend-item-checkbox",
-        disabled: isDisabled
-      }) : null, /*#__PURE__*/_jsxs("label", {
+  return /*#__PURE__*/_jsxs("div", {
+    className: classnames('chart-legend-item', className),
+    "test-id": testId,
+    onMouseEnter: () => onMouseEnter({
+      item
+    }),
+    onMouseLeave: () => onMouseLeave({
+      item
+    }),
+    children: [isInteractive ? /*#__PURE__*/_jsx("input", {
+      onChange: e => isDisabled ? null : onChange({
+        item,
+        isActive: e.target.checked
+      }),
+      id: id,
+      "test-id": "chart-legend-item-input",
+      type: "checkbox",
+      checked: isActive,
+      value: key,
+      className: "chart-legend-item-checkbox",
+      disabled: isDisabled
+    }) : null, /*#__PURE__*/_jsx(Tooltip, {
+      content: tooltipText,
+      placement: TOOLTIP_PLACEMENT_TYPES.TOP,
+      children: /*#__PURE__*/_jsxs("label", {
         htmlFor: id,
         className: "chart-legend-item-label",
         "aria-labelledby": `${id}-glyph ${id}-label`,
@@ -53,7 +61,7 @@ export function ChartLegendItem({
           id: `${id}-label`,
           children: label
         })]
-      })]
-    })
+      })
+    })]
   });
 }

package/esm/chart-legend/chart-legend.d.ts

@@ -1,4 +1,4 @@
-import { ChartLegendItemType, OnChangeHandler } from './types';
+import { ChartLegendItemType, OnChangeHandler, OnMouseEnterHandler, OnMouseLeaveHandler } from './types';
 import './chart-legend.less';
 type ChartLegendProps = {
     className?: string;
@@ -7,11 +7,13 @@ type ChartLegendProps = {
     /** if true, legend items will become clickable */
     isInteractive?: boolean;
     onChange?: OnChangeHandler;
+    onMouseEnter?: OnMouseEnterHandler;
+    onMouseLeave?: OnMouseLeaveHandler;
 };
 /**
  * Legends for charts
  * @midnight-gray-supported
  * @alpine-light-supported
  */
-export declare function ChartLegend({ className, items, isInteractive, onChange, testId, }: ChartLegendProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartLegend({ className, items, isInteractive, onChange, onMouseEnter, onMouseLeave, testId, }: ChartLegendProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/chart-legend/chart-legend.js

@@ -12,6 +12,8 @@ export function ChartLegend({
   items,
   isInteractive,
   onChange,
+  onMouseEnter,
+  onMouseLeave,
   testId
 }) {
   return /*#__PURE__*/_jsx("div", {
@@ -21,7 +23,9 @@ export function ChartLegend({
       return /*#__PURE__*/_jsx(ChartLegendItem, {
         item: item,
         isInteractive: isInteractive,
-        onChange: onChange
+        onChange: onChange,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
       }, item.key);
     })
   });

package/esm/chart-legend/types.d.ts

@@ -16,3 +16,8 @@ export type OnChangeHandlerEvent = {
     isActive: boolean;
 };
 export type OnChangeHandler = (event: OnChangeHandlerEvent) => void;
+export type OnMouseOverHandlerEvent = {
+    item: ChartLegendItemType;
+};
+export type OnMouseEnterHandler = (event: OnMouseOverHandlerEvent) => void;
+export type OnMouseLeaveHandler = (event: OnMouseOverHandlerEvent) => void;

package/esm/key-value-pairs/key-value-inputs.d.ts

@@ -1,5 +1,5 @@
 import React, { MouseEvent } from 'react';
-import { Item } from './types';
+import { Item, ValueObject } from './types';
 import { FormFieldValidity } from '../form-field/validity-shape';
 type OnChangeEvent = Item;
 type KeyValueInputsProps = {
@@ -9,6 +9,7 @@ type KeyValueInputsProps = {
     value?: string | number;
     /** True to disable inputs, false to enable inputs */
     isDisabled?: boolean;
+    disabledPairs?: ValueObject;
     /** Change handler */
     onChange?: (event: OnChangeEvent) => void;
     /** Delete handler */

package/esm/key-value-pairs/key-value-inputs.js

@@ -16,6 +16,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
     name,
     value = '',
     isDisabled = false,
+    disabledPairs,
     onChange = () => {},
     onDelete = () => {},
     validity = {},
@@ -33,6 +34,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
     id,
     validationValues
   });
+  const disabled = isDisabled || disabledPairs?.[name] !== undefined && disabledPairs[name] === value;
   return /*#__PURE__*/_jsxs("div", {
     className: "kvp-inputs",
     "test-id": "kvp-inputs",
@@ -41,7 +43,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
       children: /*#__PURE__*/_jsx(Input, {
         type: INPUT_TYPES.TEXT,
         value: name,
-        isDisabled: isDisabled,
+        isDisabled: disabled,
         onChange: ({
           target
         }) => onChange({
@@ -60,7 +62,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
       children: /*#__PURE__*/_jsx(Input, {
         type: INPUT_TYPES.TEXT,
         value: value,
-        isDisabled: isDisabled,
+        isDisabled: disabled,
         onChange: ({
           target
         }) => onChange({
@@ -78,7 +80,7 @@ const KeyValueInputs = /*#__PURE__*/forwardRef((props, ref) => {
       children: /*#__PURE__*/_jsx(Button, {
         accentType: ACCENT_TYPES.ROUND_ICON,
         onClick: onDelete,
-        isDisabled: isDisabled,
+        isDisabled: disabled,
         testId: "kvp-delete-button",
         "aria-label": deleteKeyValueText,
         children: /*#__PURE__*/_jsx(FontAwesomeIcon, {

package/esm/key-value-pairs/key-value-pairs.d.ts

@@ -8,7 +8,9 @@ type KeyValuePairsProps = {
     /** Object that represents the key value pairs in this component */
     value: ValueObject;
     className?: string;
+    /** whether whole form is disabled */
     isDisabled?: boolean;
+    disabledPairs?: ValueObject;
     label?: string;
     /** Label for the key column */
     keyLabel?: string;
@@ -54,5 +56,5 @@ type KeyValuePairsProps = {
     @midnight-gray-supported
     @alpine-light-supported
  */
-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;
+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;
 export {};

package/esm/key-value-pairs/key-value-pairs.js

@@ -57,6 +57,7 @@ export const KeyValuePairs = ({
   helperText = '',
   placeholder: placeholderParams,
   isDisabled = false,
+  disabledPairs,
   onChange = () => {},
   hasWarning = false,
   emptyCheck = false,
@@ -189,6 +190,7 @@ export const KeyValuePairs = ({
         name: item.name,
         value: item.value,
         isDisabled: isDisabled,
+        disabledPairs: disabledPairs,
         onChange: updatedOption => changeItem(index, updatedOption),
         onDelete: () => removeItem(index),
         deleteKeyValueText: `${deleteKeyValueText} ${paddedIndex}`,

package/js/bundle/bundle.js

@@ -43786,7 +43786,11 @@ function ChartLegendItem(_ref) {
     _ref$isInteractive = _ref.isInteractive,
     isInteractive = _ref$isInteractive === void 0 ? false : _ref$isInteractive,
     _ref$onChange = _ref.onChange,
-    _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+    _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    _ref$onMouseEnter = _ref.onMouseEnter,
+    _onMouseEnter = _ref$onMouseEnter === void 0 ? function () {} : _ref$onMouseEnter,
+    _ref$onMouseLeave = _ref.onMouseLeave,
+    _onMouseLeave = _ref$onMouseLeave === void 0 ? function () {} : _ref$onMouseLeave;
   var key = item.key,
     label = item.label,
     color = item.color,
@@ -43800,12 +43804,19 @@ function ChartLegendItem(_ref) {
     tooltipText = _item$tooltipText === void 0 ? '' : _item$tooltipText,
     isDisabled = item.isDisabled;
   var id = "legend-item-".concat(key);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_2__.Tooltip, {
-    content: tooltipText,
-    placement: _tooltip__WEBPACK_IMPORTED_MODULE_2__.TOOLTIP_PLACEMENT_TYPES.TOP
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('chart-legend-item', className),
-    "test-id": testId
+    "test-id": testId,
+    onMouseEnter: function onMouseEnter() {
+      return _onMouseEnter({
+        item: item
+      });
+    },
+    onMouseLeave: function onMouseLeave() {
+      return _onMouseLeave({
+        item: item
+      });
+    }
   }, isInteractive ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
     onChange: function onChange(e) {
       return isDisabled ? null : _onChange({
@@ -43820,7 +43831,10 @@ function ChartLegendItem(_ref) {
     value: key,
     className: "chart-legend-item-checkbox",
     disabled: isDisabled
-  }) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+  }) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_2__.Tooltip, {
+    content: tooltipText,
+    placement: _tooltip__WEBPACK_IMPORTED_MODULE_2__.TOOLTIP_PLACEMENT_TYPES.TOP
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
     htmlFor: id,
     className: "chart-legend-item-label",
     "aria-labelledby": "".concat(id, "-glyph ").concat(id, "-label")
@@ -43879,6 +43893,8 @@ function ChartLegend(_ref) {
     items = _ref.items,
     isInteractive = _ref.isInteractive,
     onChange = _ref.onChange,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
     testId = _ref.testId;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('chart-legend', className),
@@ -43888,7 +43904,9 @@ function ChartLegend(_ref) {
       key: item.key,
       item: item,
       isInteractive: isInteractive,
-      onChange: onChange
+      onChange: onChange,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
     });
   }));
 }
@@ -66652,6 +66670,7 @@ var KeyValueInputs = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
     value = _props$value === void 0 ? '' : _props$value,
     _props$isDisabled = props.isDisabled,
     isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    disabledPairs = props.disabledPairs,
     _props$onChange = props.onChange,
     _onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
     _props$onDelete = props.onDelete,
@@ -66671,6 +66690,7 @@ var KeyValueInputs = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
     id: id,
     validationValues: validationValues
   });
+  var disabled = isDisabled || (disabledPairs === null || disabledPairs === void 0 ? void 0 : disabledPairs[name]) !== undefined && disabledPairs[name] === value;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "kvp-inputs",
     "test-id": "kvp-inputs"
@@ -66679,7 +66699,7 @@ var KeyValueInputs = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_input__WEBPACK_IMPORTED_MODULE_3__.Input, _extends({
     type: _form_field__WEBPACK_IMPORTED_MODULE_5__.INPUT_TYPES.TEXT,
     value: name,
-    isDisabled: isDisabled,
+    isDisabled: disabled,
     onChange: function onChange(_ref) {
       var target = _ref.target;
       return _onChange({
@@ -66697,7 +66717,7 @@ var KeyValueInputs = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_input__WEBPACK_IMPORTED_MODULE_3__.Input, _extends({
     type: _form_field__WEBPACK_IMPORTED_MODULE_5__.INPUT_TYPES.TEXT,
     value: value,
-    isDisabled: isDisabled,
+    isDisabled: disabled,
     onChange: function onChange(_ref2) {
       var target = _ref2.target;
       return _onChange({
@@ -66714,7 +66734,7 @@ var KeyValueInputs = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_button__WEBPACK_IMPORTED_MODULE_4__.Button, {
     accentType: _button__WEBPACK_IMPORTED_MODULE_4__.ACCENT_TYPES.ROUND_ICON,
     onClick: onDelete,
-    isDisabled: isDisabled,
+    isDisabled: disabled,
     testId: "kvp-delete-button",
     "aria-label": deleteKeyValueText
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_font_awesome_icon__WEBPACK_IMPORTED_MODULE_2__.FontAwesomeIcon, {
@@ -66850,6 +66870,7 @@ var KeyValuePairs = function KeyValuePairs(_ref5) {
     placeholderParams = _ref5.placeholder,
     _ref5$isDisabled = _ref5.isDisabled,
     isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled,
+    disabledPairs = _ref5.disabledPairs,
     _ref5$onChange = _ref5.onChange,
     onChange = _ref5$onChange === void 0 ? function () {} : _ref5$onChange,
     _ref5$hasWarning = _ref5.hasWarning,
@@ -66996,6 +67017,7 @@ var KeyValuePairs = function KeyValuePairs(_ref5) {
       name: item.name,
       value: item.value,
       isDisabled: isDisabled,
+      disabledPairs: disabledPairs,
       onChange: function onChange(updatedOption) {
         return changeItem(index, updatedOption);
       },