@datarobot/design-system 29.4.0 → 29.5.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.
Files changed (16) hide show
  1. package/cjs/chart-legend/chart-legend-item.d.ts +4 -2
  2. package/cjs/chart-legend/chart-legend-item.js +30 -22
  3. package/cjs/chart-legend/chart-legend.d.ts +4 -2
  4. package/cjs/chart-legend/chart-legend.js +5 -1
  5. package/cjs/chart-legend/types.d.ts +5 -0
  6. package/esm/chart-legend/chart-legend-item.d.ts +4 -2
  7. package/esm/chart-legend/chart-legend-item.js +30 -22
  8. package/esm/chart-legend/chart-legend.d.ts +4 -2
  9. package/esm/chart-legend/chart-legend.js +5 -1
  10. package/esm/chart-legend/types.d.ts +5 -0
  11. package/js/bundle/bundle.js +26 -8
  12. package/js/bundle/bundle.min.js +1 -1
  13. package/js/bundle/index.d.ts +11 -2
  14. package/package.json +1 -1
  15. package/styles/index.css +3 -3
  16. package/styles/index.min.css +1 -1
package/cjs/chart-legend/chart-legend-item.d.ts CHANGED
@@ -1,9 +1,11 @@
1
- import { ChartLegendItemType, OnChangeHandler } from './types';
1
+ import { ChartLegendItemType, OnChangeHandler, OnMouseEnterHandler, OnMouseLeaveHandler } from './types';
2
2
  import './chart-legend-item.less';
3
3
  type ChartLegendItemProps = {
4
4
  item: ChartLegendItemType;
5
5
  isInteractive?: boolean;
6
6
  onChange?: OnChangeHandler;
7
+ onMouseEnter?: OnMouseEnterHandler;
8
+ onMouseLeave?: OnMouseLeaveHandler;
7
9
  };
8
- export declare function ChartLegendItem({ item, isInteractive, onChange, }: ChartLegendItemProps): import("react/jsx-runtime").JSX.Element;
10
+ export declare function ChartLegendItem({ item, isInteractive, onChange, onMouseEnter, onMouseLeave, }: ChartLegendItemProps): import("react/jsx-runtime").JSX.Element;
9
11
  export {};
package/cjs/chart-legend/chart-legend-item.js CHANGED
@@ -13,7 +13,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
13
13
  function ChartLegendItem({
14
14
  item,
15
15
  isInteractive = false,
16
- onChange = () => {}
16
+ onChange = () => {},
17
+ onMouseEnter = () => {},
18
+ onMouseLeave = () => {}
17
19
  }) {
18
20
  const {
19
21
  key,
@@ -27,25 +29,31 @@ function ChartLegendItem({
27
29
  isDisabled
28
30
  } = item;
29
31
  const id = `legend-item-${key}`;
30
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
31
- content: tooltipText,
32
- placement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
33
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
34
- className: (0, _classnames.default)('chart-legend-item', className),
35
- "test-id": testId,
36
- children: [isInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
37
- onChange: e => isDisabled ? null : onChange({
38
- item,
39
- isActive: e.target.checked
40
- }),
41
- id: id,
42
- "test-id": "chart-legend-item-input",
43
- type: "checkbox",
44
- checked: isActive,
45
- value: key,
46
- className: "chart-legend-item-checkbox",
47
- disabled: isDisabled
48
- }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
32
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
33
+ className: (0, _classnames.default)('chart-legend-item', className),
34
+ "test-id": testId,
35
+ onMouseEnter: () => onMouseEnter({
36
+ item
37
+ }),
38
+ onMouseLeave: () => onMouseLeave({
39
+ item
40
+ }),
41
+ children: [isInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
42
+ onChange: e => isDisabled ? null : onChange({
43
+ item,
44
+ isActive: e.target.checked
45
+ }),
46
+ id: id,
47
+ "test-id": "chart-legend-item-input",
48
+ type: "checkbox",
49
+ checked: isActive,
50
+ value: key,
51
+ className: "chart-legend-item-checkbox",
52
+ disabled: isDisabled
53
+ }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
54
+ content: tooltipText,
55
+ placement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
56
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
49
57
  htmlFor: id,
50
58
  className: "chart-legend-item-label",
51
59
  "aria-labelledby": `${id}-glyph ${id}-label`,
@@ -60,7 +68,7 @@ function ChartLegendItem({
60
68
  id: `${id}-label`,
61
69
  children: label
62
70
  })]
63
- })]
64
- })
71
+ })
72
+ })]
65
73
  });
66
74
  }
package/cjs/chart-legend/chart-legend.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ChartLegendItemType, OnChangeHandler } from './types';
1
+ import { ChartLegendItemType, OnChangeHandler, OnMouseEnterHandler, OnMouseLeaveHandler } from './types';
2
2
  import './chart-legend.less';
3
3
  type ChartLegendProps = {
4
4
  className?: string;
@@ -7,11 +7,13 @@ type ChartLegendProps = {
7
7
  /** if true, legend items will become clickable */
8
8
  isInteractive?: boolean;
9
9
  onChange?: OnChangeHandler;
10
+ onMouseEnter?: OnMouseEnterHandler;
11
+ onMouseLeave?: OnMouseLeaveHandler;
10
12
  };
11
13
  /**
12
14
  * Legends for charts
13
15
  * @midnight-gray-supported
14
16
  * @alpine-light-supported
15
17
  */
16
- export declare function ChartLegend({ className, items, isInteractive, onChange, testId, }: ChartLegendProps): import("react/jsx-runtime").JSX.Element;
18
+ export declare function ChartLegend({ className, items, isInteractive, onChange, onMouseEnter, onMouseLeave, testId, }: ChartLegendProps): import("react/jsx-runtime").JSX.Element;
17
19
  export {};
package/cjs/chart-legend/chart-legend.js CHANGED
@@ -19,6 +19,8 @@ function ChartLegend({
19
19
  items,
20
20
  isInteractive,
21
21
  onChange,
22
+ onMouseEnter,
23
+ onMouseLeave,
22
24
  testId
23
25
  }) {
24
26
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -28,7 +30,9 @@ function ChartLegend({
28
30
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chartLegendItem.ChartLegendItem, {
29
31
  item: item,
30
32
  isInteractive: isInteractive,
31
- onChange: onChange
33
+ onChange: onChange,
34
+ onMouseEnter: onMouseEnter,
35
+ onMouseLeave: onMouseLeave
32
36
  }, item.key);
33
37
  })
34
38
  });
package/cjs/chart-legend/types.d.ts CHANGED
@@ -16,3 +16,8 @@ export type OnChangeHandlerEvent = {
16
16
  isActive: boolean;
17
17
  };
18
18
  export type OnChangeHandler = (event: OnChangeHandlerEvent) => void;
19
+ export type OnMouseOverHandlerEvent = {
20
+ item: ChartLegendItemType;
21
+ };
22
+ export type OnMouseEnterHandler = (event: OnMouseOverHandlerEvent) => void;
23
+ export type OnMouseLeaveHandler = (event: OnMouseOverHandlerEvent) => void;
package/esm/chart-legend/chart-legend-item.d.ts CHANGED
@@ -1,9 +1,11 @@
1
- import { ChartLegendItemType, OnChangeHandler } from './types';
1
+ import { ChartLegendItemType, OnChangeHandler, OnMouseEnterHandler, OnMouseLeaveHandler } from './types';
2
2
  import './chart-legend-item.less';
3
3
  type ChartLegendItemProps = {
4
4
  item: ChartLegendItemType;
5
5
  isInteractive?: boolean;
6
6
  onChange?: OnChangeHandler;
7
+ onMouseEnter?: OnMouseEnterHandler;
8
+ onMouseLeave?: OnMouseLeaveHandler;
7
9
  };
8
- export declare function ChartLegendItem({ item, isInteractive, onChange, }: ChartLegendItemProps): import("react/jsx-runtime").JSX.Element;
10
+ export declare function ChartLegendItem({ item, isInteractive, onChange, onMouseEnter, onMouseLeave, }: ChartLegendItemProps): import("react/jsx-runtime").JSX.Element;
9
11
  export {};
package/esm/chart-legend/chart-legend-item.js CHANGED
@@ -6,7 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
6
  export function ChartLegendItem({
7
7
  item,
8
8
  isInteractive = false,
9
- onChange = () => {}
9
+ onChange = () => {},
10
+ onMouseEnter = () => {},
11
+ onMouseLeave = () => {}
10
12
  }) {
11
13
  const {
12
14
  key,
@@ -20,25 +22,31 @@ export function ChartLegendItem({
20
22
  isDisabled
21
23
  } = item;
22
24
  const id = `legend-item-${key}`;
23
- return /*#__PURE__*/_jsx(Tooltip, {
24
- content: tooltipText,
25
- placement: TOOLTIP_PLACEMENT_TYPES.TOP,
26
- children: /*#__PURE__*/_jsxs("div", {
27
- className: classnames('chart-legend-item', className),
28
- "test-id": testId,
29
- children: [isInteractive ? /*#__PURE__*/_jsx("input", {
30
- onChange: e => isDisabled ? null : onChange({
31
- item,
32
- isActive: e.target.checked
33
- }),
34
- id: id,
35
- "test-id": "chart-legend-item-input",
36
- type: "checkbox",
37
- checked: isActive,
38
- value: key,
39
- className: "chart-legend-item-checkbox",
40
- disabled: isDisabled
41
- }) : null, /*#__PURE__*/_jsxs("label", {
25
+ return /*#__PURE__*/_jsxs("div", {
26
+ className: classnames('chart-legend-item', className),
27
+ "test-id": testId,
28
+ onMouseEnter: () => onMouseEnter({
29
+ item
30
+ }),
31
+ onMouseLeave: () => onMouseLeave({
32
+ item
33
+ }),
34
+ children: [isInteractive ? /*#__PURE__*/_jsx("input", {
35
+ onChange: e => isDisabled ? null : onChange({
36
+ item,
37
+ isActive: e.target.checked
38
+ }),
39
+ id: id,
40
+ "test-id": "chart-legend-item-input",
41
+ type: "checkbox",
42
+ checked: isActive,
43
+ value: key,
44
+ className: "chart-legend-item-checkbox",
45
+ disabled: isDisabled
46
+ }) : null, /*#__PURE__*/_jsx(Tooltip, {
47
+ content: tooltipText,
48
+ placement: TOOLTIP_PLACEMENT_TYPES.TOP,
49
+ children: /*#__PURE__*/_jsxs("label", {
42
50
  htmlFor: id,
43
51
  className: "chart-legend-item-label",
44
52
  "aria-labelledby": `${id}-glyph ${id}-label`,
@@ -53,7 +61,7 @@ export function ChartLegendItem({
53
61
  id: `${id}-label`,
54
62
  children: label
55
63
  })]
56
- })]
57
- })
64
+ })
65
+ })]
58
66
  });
59
67
  }
package/esm/chart-legend/chart-legend.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ChartLegendItemType, OnChangeHandler } from './types';
1
+ import { ChartLegendItemType, OnChangeHandler, OnMouseEnterHandler, OnMouseLeaveHandler } from './types';
2
2
  import './chart-legend.less';
3
3
  type ChartLegendProps = {
4
4
  className?: string;
@@ -7,11 +7,13 @@ type ChartLegendProps = {
7
7
  /** if true, legend items will become clickable */
8
8
  isInteractive?: boolean;
9
9
  onChange?: OnChangeHandler;
10
+ onMouseEnter?: OnMouseEnterHandler;
11
+ onMouseLeave?: OnMouseLeaveHandler;
10
12
  };
11
13
  /**
12
14
  * Legends for charts
13
15
  * @midnight-gray-supported
14
16
  * @alpine-light-supported
15
17
  */
16
- export declare function ChartLegend({ className, items, isInteractive, onChange, testId, }: ChartLegendProps): import("react/jsx-runtime").JSX.Element;
18
+ export declare function ChartLegend({ className, items, isInteractive, onChange, onMouseEnter, onMouseLeave, testId, }: ChartLegendProps): import("react/jsx-runtime").JSX.Element;
17
19
  export {};
package/esm/chart-legend/chart-legend.js CHANGED
@@ -12,6 +12,8 @@ export function ChartLegend({
12
12
  items,
13
13
  isInteractive,
14
14
  onChange,
15
+ onMouseEnter,
16
+ onMouseLeave,
15
17
  testId
16
18
  }) {
17
19
  return /*#__PURE__*/_jsx("div", {
@@ -21,7 +23,9 @@ export function ChartLegend({
21
23
  return /*#__PURE__*/_jsx(ChartLegendItem, {
22
24
  item: item,
23
25
  isInteractive: isInteractive,
24
- onChange: onChange
26
+ onChange: onChange,
27
+ onMouseEnter: onMouseEnter,
28
+ onMouseLeave: onMouseLeave
25
29
  }, item.key);
26
30
  })
27
31
  });
package/esm/chart-legend/types.d.ts CHANGED
@@ -16,3 +16,8 @@ export type OnChangeHandlerEvent = {
16
16
  isActive: boolean;
17
17
  };
18
18
  export type OnChangeHandler = (event: OnChangeHandlerEvent) => void;
19
+ export type OnMouseOverHandlerEvent = {
20
+ item: ChartLegendItemType;
21
+ };
22
+ export type OnMouseEnterHandler = (event: OnMouseOverHandlerEvent) => void;
23
+ export type OnMouseLeaveHandler = (event: OnMouseOverHandlerEvent) => void;
package/js/bundle/bundle.js CHANGED
@@ -43786,7 +43786,11 @@ function ChartLegendItem(_ref) {
43786
43786
  _ref$isInteractive = _ref.isInteractive,
43787
43787
  isInteractive = _ref$isInteractive === void 0 ? false : _ref$isInteractive,
43788
43788
  _ref$onChange = _ref.onChange,
43789
- _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
43789
+ _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
43790
+ _ref$onMouseEnter = _ref.onMouseEnter,
43791
+ _onMouseEnter = _ref$onMouseEnter === void 0 ? function () {} : _ref$onMouseEnter,
43792
+ _ref$onMouseLeave = _ref.onMouseLeave,
43793
+ _onMouseLeave = _ref$onMouseLeave === void 0 ? function () {} : _ref$onMouseLeave;
43790
43794
  var key = item.key,
43791
43795
  label = item.label,
43792
43796
  color = item.color,
@@ -43800,12 +43804,19 @@ function ChartLegendItem(_ref) {
43800
43804
  tooltipText = _item$tooltipText === void 0 ? '' : _item$tooltipText,
43801
43805
  isDisabled = item.isDisabled;
43802
43806
  var id = "legend-item-".concat(key);
43803
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_2__.Tooltip, {
43804
- content: tooltipText,
43805
- placement: _tooltip__WEBPACK_IMPORTED_MODULE_2__.TOOLTIP_PLACEMENT_TYPES.TOP
43806
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
43807
+ return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
43807
43808
  className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('chart-legend-item', className),
43808
- "test-id": testId
43809
+ "test-id": testId,
43810
+ onMouseEnter: function onMouseEnter() {
43811
+ return _onMouseEnter({
43812
+ item: item
43813
+ });
43814
+ },
43815
+ onMouseLeave: function onMouseLeave() {
43816
+ return _onMouseLeave({
43817
+ item: item
43818
+ });
43819
+ }
43809
43820
  }, isInteractive ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
43810
43821
  onChange: function onChange(e) {
43811
43822
  return isDisabled ? null : _onChange({
@@ -43820,7 +43831,10 @@ function ChartLegendItem(_ref) {
43820
43831
  value: key,
43821
43832
  className: "chart-legend-item-checkbox",
43822
43833
  disabled: isDisabled
43823
- }) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
43834
+ }) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_2__.Tooltip, {
43835
+ content: tooltipText,
43836
+ placement: _tooltip__WEBPACK_IMPORTED_MODULE_2__.TOOLTIP_PLACEMENT_TYPES.TOP
43837
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
43824
43838
  htmlFor: id,
43825
43839
  className: "chart-legend-item-label",
43826
43840
  "aria-labelledby": "".concat(id, "-glyph ").concat(id, "-label")
@@ -43879,6 +43893,8 @@ function ChartLegend(_ref) {
43879
43893
  items = _ref.items,
43880
43894
  isInteractive = _ref.isInteractive,
43881
43895
  onChange = _ref.onChange,
43896
+ onMouseEnter = _ref.onMouseEnter,
43897
+ onMouseLeave = _ref.onMouseLeave,
43882
43898
  testId = _ref.testId;
43883
43899
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
43884
43900
  className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('chart-legend', className),
@@ -43888,7 +43904,9 @@ function ChartLegend(_ref) {
43888
43904
  key: item.key,
43889
43905
  item: item,
43890
43906
  isInteractive: isInteractive,
43891
- onChange: onChange
43907
+ onChange: onChange,
43908
+ onMouseEnter: onMouseEnter,
43909
+ onMouseLeave: onMouseLeave
43892
43910
  });
43893
43911
  }));
43894
43912
  }