carbon-react 104.53.1 → 104.53.4

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 (9) hide show
  1. package/esm/components/flat-table/flat-table-row/flat-table-row.style.js +1 -1
  2. package/esm/components/select/simple-select/simple-select-test.stories.js +127 -117
  3. package/esm/components/tooltip/tooltip.component.js +4 -0
  4. package/esm/hooks/__internal__/useInputAccessibility/useInputAccessibility.js +3 -1
  5. package/lib/components/flat-table/flat-table-row/flat-table-row.style.js +1 -1
  6. package/lib/components/select/simple-select/simple-select-test.stories.js +126 -115
  7. package/lib/components/tooltip/tooltip.component.js +5 -0
  8. package/lib/hooks/__internal__/useInputAccessibility/useInputAccessibility.js +3 -1
  9. package/package.json +1 -1
package/esm/components/flat-table/flat-table-row/flat-table-row.style.js CHANGED
@@ -89,7 +89,7 @@ const StyledFlatTableRow = styled.tr`
89
89
  width: auto;
90
90
  outline: 2px solid #0000;
91
91
 
92
- [data-component="icon"] {
92
+ [data-component="icon"]:not([color]) {
93
93
  color: var(--colorsActionMinor500);
94
94
  }
95
95
 
package/esm/components/select/simple-select/simple-select-test.stories.js CHANGED
@@ -1,8 +1,6 @@
1
1
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
- // it's not mdx file because of https://github.com/storybookjs/storybook/issues/11542
4
3
  import React from "react";
5
- import { action } from "@storybook/addon-actions";
6
4
  import { Select, Option } from "..";
7
5
  export default {
8
6
  component: Select,
@@ -18,40 +16,145 @@ export default {
18
16
  argTypes: {
19
17
  value: {
20
18
  table: {
21
- disabled: true
22
- }
19
+ disable: true
20
+ },
21
+ control: false
22
+ },
23
+ disablePortal: {
24
+ table: {
25
+ disable: true
26
+ },
27
+ control: false
28
+ },
29
+ defaultValue: {
30
+ table: {
31
+ disable: true
32
+ },
33
+ control: false
34
+ },
35
+ children: {
36
+ table: {
37
+ disable: true
38
+ },
39
+ control: false
40
+ },
41
+ openOnFocus: {
42
+ table: {
43
+ disable: true
44
+ },
45
+ control: false
46
+ },
47
+ transparent: {
48
+ table: {
49
+ disable: true
50
+ },
51
+ control: false
52
+ },
53
+ tableHeader: {
54
+ table: {
55
+ disable: true
56
+ },
57
+ control: false
58
+ },
59
+ multiColumn: {
60
+ table: {
61
+ disable: true
62
+ },
63
+ control: false
64
+ },
65
+ isLoading: {
66
+ table: {
67
+ disable: true
68
+ },
69
+ control: false
70
+ },
71
+ onListScrollBottom: {
72
+ table: {
73
+ disable: true
74
+ },
75
+ control: false
76
+ },
77
+ tooltipPosition: {
78
+ table: {
79
+ disable: true
80
+ },
81
+ control: false
82
+ },
83
+ "data-component": {
84
+ table: {
85
+ disable: true
86
+ },
87
+ control: false
88
+ },
89
+ "data-element": {
90
+ table: {
91
+ disable: true
92
+ },
93
+ control: false
94
+ },
95
+ "data-role": {
96
+ table: {
97
+ disable: true
98
+ },
99
+ control: false
23
100
  },
24
101
  listPlacement: {
25
102
  options: ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"],
26
103
  control: {
27
104
  type: "select"
28
105
  }
106
+ },
107
+ onOpen: {
108
+ action: "onOpen",
109
+ table: {
110
+ disable: true
111
+ },
112
+ control: false
113
+ },
114
+ onChange: {
115
+ action: "onChange",
116
+ table: {
117
+ disable: true
118
+ },
119
+ control: false
120
+ },
121
+ onClick: {
122
+ action: "onClick",
123
+ table: {
124
+ disable: true
125
+ },
126
+ control: false
127
+ },
128
+ onFocus: {
129
+ action: "onFocus",
130
+ table: {
131
+ disable: true
132
+ },
133
+ control: false
134
+ },
135
+ onBlur: {
136
+ action: "onBlur",
137
+ table: {
138
+ disable: true
139
+ },
140
+ control: false
141
+ },
142
+ onKeyDown: {
143
+ action: "onKeyDown",
144
+ table: {
145
+ disable: true
146
+ },
147
+ control: false
29
148
  }
30
149
  }
31
150
  };
32
151
 
33
- const Default = args => {
152
+ const Template = args => {
34
153
  return /*#__PURE__*/React.createElement(Select, _extends({
35
154
  name: "simple",
36
155
  id: "simple",
37
156
  label: "label",
38
- labelInline: true,
39
- onOpen: action("onOpen"),
40
- onChange: action("onChange", {
41
- depth: 2
42
- }),
43
- onClick: action("onClick", {
44
- depth: 2
45
- }),
46
- onFocus: action("onFocus", {
47
- depth: 2
48
- }),
49
- onBlur: action("onBlur", {
50
- depth: 2
51
- }),
52
- onKeyDown: action("onKeyDown", {
53
- depth: 2
54
- })
157
+ labelInline: true
55
158
  }, args), /*#__PURE__*/React.createElement(Option, {
56
159
  text: "Amber",
57
160
  value: "1"
@@ -82,102 +185,9 @@ const Default = args => {
82
185
  }));
83
186
  };
84
187
 
85
- Default.storyName = "default";
86
- Default.argTypes = {
87
- value: {
88
- table: {
89
- disable: true
90
- },
91
- control: false
92
- },
93
- disablePortal: {
94
- table: {
95
- disable: true
96
- },
97
- control: false
98
- },
99
- defaultValue: {
100
- table: {
101
- disable: true
102
- },
103
- control: false
104
- },
105
- children: {
106
- table: {
107
- disable: true
108
- },
109
- control: false
110
- },
111
- openOnFocus: {
112
- table: {
113
- disable: true
114
- },
115
- control: false
116
- },
117
- transparent: {
118
- table: {
119
- disable: true
120
- },
121
- control: false
122
- },
123
- tableHeader: {
124
- table: {
125
- disable: true
126
- },
127
- control: false
128
- },
129
- multiColumn: {
130
- table: {
131
- disable: true
132
- },
133
- control: false
134
- },
135
- onOpen: {
136
- table: {
137
- disable: true
138
- },
139
- control: false
140
- },
141
- isLoading: {
142
- table: {
143
- disable: true
144
- },
145
- control: false
146
- },
147
- onListScrollBottom: {
148
- table: {
149
- disable: true
150
- },
151
- control: false
152
- },
153
- tooltipPosition: {
154
- table: {
155
- disable: true
156
- },
157
- control: false
158
- },
159
- "data-component": {
160
- table: {
161
- disable: true
162
- },
163
- control: false
164
- },
165
- "data-element": {
166
- table: {
167
- disable: true
168
- },
169
- control: false
170
- },
171
- "data-role": {
172
- table: {
173
- disable: true
174
- },
175
- control: false
176
- }
177
- };
188
+ export const Default = Template.bind({});
178
189
  Default.args = {
179
190
  mt: 0,
180
191
  listPlacement: undefined,
181
192
  flipEnabled: true
182
- };
183
- export { Default };
193
+ };
package/esm/components/tooltip/tooltip.component.js CHANGED
@@ -3,11 +3,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
3
3
  import React, { useRef } from "react";
4
4
  import PropTypes from "prop-types";
5
5
  import Tippy from "@tippyjs/react/headless";
6
+ import { sticky } from "tippy.js";
6
7
  import StyledTooltip from "./tooltip.style";
7
8
  import StyledPointer from "./tooltip-pointer.style";
8
9
  import tagComponent from "../../__internal__/utils/helpers/tags/tags";
9
10
  import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
10
11
  const TOOLTIP_DELAY = 100;
12
+ const tippyPlugins = [sticky];
11
13
  const Tooltip = /*#__PURE__*/React.forwardRef(({
12
14
  children,
13
15
  isVisible,
@@ -60,6 +62,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
60
62
  }, isVisible !== undefined && {
61
63
  visible: isVisible
62
64
  }, {
65
+ plugins: tippyPlugins,
66
+ sticky: true,
63
67
  render: attrs => tooltip(attrs, message),
64
68
  reference: target,
65
69
  popperOptions: {
package/esm/hooks/__internal__/useInputAccessibility/useInputAccessibility.js CHANGED
@@ -7,7 +7,9 @@ export default function useInputAccessibility({
7
7
  fieldHelp
8
8
  }) {
9
9
  const labelId = label ? `${id}-label` : undefined;
10
- const validationIconId = [error, warning, info].filter(validation => typeof validation === "string").length ? `${id}-validation-icon` : undefined;
10
+ const validationIconId = [error, warning, info].filter(validation => {
11
+ return validation && typeof validation === "string";
12
+ }).length ? `${id}-validation-icon` : undefined;
11
13
  const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
12
14
  const ariaDescribedBy = [fieldHelpId, validationIconId].filter(Boolean).join(" ");
13
15
  const ariaLabelledBy = labelId;
package/lib/components/flat-table/flat-table-row/flat-table-row.style.js CHANGED
@@ -110,7 +110,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
110
110
  width: auto;
111
111
  outline: 2px solid #0000;
112
112
 
113
- [data-component="icon"] {
113
+ [data-component="icon"]:not([color]) {
114
114
  color: var(--colorsActionMinor500);
115
115
  }
116
116
 
package/lib/components/select/simple-select/simple-select-test.stories.js CHANGED
@@ -7,8 +7,6 @@ exports.Default = exports.default = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
- var _addonActions = require("@storybook/addon-actions");
11
-
12
10
  var _ = require("..");
13
11
 
14
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,41 +27,146 @@ var _default = {
29
27
  argTypes: {
30
28
  value: {
31
29
  table: {
32
- disabled: true
33
- }
30
+ disable: true
31
+ },
32
+ control: false
33
+ },
34
+ disablePortal: {
35
+ table: {
36
+ disable: true
37
+ },
38
+ control: false
39
+ },
40
+ defaultValue: {
41
+ table: {
42
+ disable: true
43
+ },
44
+ control: false
45
+ },
46
+ children: {
47
+ table: {
48
+ disable: true
49
+ },
50
+ control: false
51
+ },
52
+ openOnFocus: {
53
+ table: {
54
+ disable: true
55
+ },
56
+ control: false
57
+ },
58
+ transparent: {
59
+ table: {
60
+ disable: true
61
+ },
62
+ control: false
63
+ },
64
+ tableHeader: {
65
+ table: {
66
+ disable: true
67
+ },
68
+ control: false
69
+ },
70
+ multiColumn: {
71
+ table: {
72
+ disable: true
73
+ },
74
+ control: false
75
+ },
76
+ isLoading: {
77
+ table: {
78
+ disable: true
79
+ },
80
+ control: false
81
+ },
82
+ onListScrollBottom: {
83
+ table: {
84
+ disable: true
85
+ },
86
+ control: false
87
+ },
88
+ tooltipPosition: {
89
+ table: {
90
+ disable: true
91
+ },
92
+ control: false
93
+ },
94
+ "data-component": {
95
+ table: {
96
+ disable: true
97
+ },
98
+ control: false
99
+ },
100
+ "data-element": {
101
+ table: {
102
+ disable: true
103
+ },
104
+ control: false
105
+ },
106
+ "data-role": {
107
+ table: {
108
+ disable: true
109
+ },
110
+ control: false
34
111
  },
35
112
  listPlacement: {
36
113
  options: ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"],
37
114
  control: {
38
115
  type: "select"
39
116
  }
117
+ },
118
+ onOpen: {
119
+ action: "onOpen",
120
+ table: {
121
+ disable: true
122
+ },
123
+ control: false
124
+ },
125
+ onChange: {
126
+ action: "onChange",
127
+ table: {
128
+ disable: true
129
+ },
130
+ control: false
131
+ },
132
+ onClick: {
133
+ action: "onClick",
134
+ table: {
135
+ disable: true
136
+ },
137
+ control: false
138
+ },
139
+ onFocus: {
140
+ action: "onFocus",
141
+ table: {
142
+ disable: true
143
+ },
144
+ control: false
145
+ },
146
+ onBlur: {
147
+ action: "onBlur",
148
+ table: {
149
+ disable: true
150
+ },
151
+ control: false
152
+ },
153
+ onKeyDown: {
154
+ action: "onKeyDown",
155
+ table: {
156
+ disable: true
157
+ },
158
+ control: false
40
159
  }
41
160
  }
42
161
  };
43
162
  exports.default = _default;
44
163
 
45
- const Default = args => {
164
+ const Template = args => {
46
165
  return /*#__PURE__*/_react.default.createElement(_.Select, _extends({
47
166
  name: "simple",
48
167
  id: "simple",
49
168
  label: "label",
50
- labelInline: true,
51
- onOpen: (0, _addonActions.action)("onOpen"),
52
- onChange: (0, _addonActions.action)("onChange", {
53
- depth: 2
54
- }),
55
- onClick: (0, _addonActions.action)("onClick", {
56
- depth: 2
57
- }),
58
- onFocus: (0, _addonActions.action)("onFocus", {
59
- depth: 2
60
- }),
61
- onBlur: (0, _addonActions.action)("onBlur", {
62
- depth: 2
63
- }),
64
- onKeyDown: (0, _addonActions.action)("onKeyDown", {
65
- depth: 2
66
- })
169
+ labelInline: true
67
170
  }, args), /*#__PURE__*/_react.default.createElement(_.Option, {
68
171
  text: "Amber",
69
172
  value: "1"
@@ -94,100 +197,8 @@ const Default = args => {
94
197
  }));
95
198
  };
96
199
 
200
+ const Default = Template.bind({});
97
201
  exports.Default = Default;
98
- Default.storyName = "default";
99
- Default.argTypes = {
100
- value: {
101
- table: {
102
- disable: true
103
- },
104
- control: false
105
- },
106
- disablePortal: {
107
- table: {
108
- disable: true
109
- },
110
- control: false
111
- },
112
- defaultValue: {
113
- table: {
114
- disable: true
115
- },
116
- control: false
117
- },
118
- children: {
119
- table: {
120
- disable: true
121
- },
122
- control: false
123
- },
124
- openOnFocus: {
125
- table: {
126
- disable: true
127
- },
128
- control: false
129
- },
130
- transparent: {
131
- table: {
132
- disable: true
133
- },
134
- control: false
135
- },
136
- tableHeader: {
137
- table: {
138
- disable: true
139
- },
140
- control: false
141
- },
142
- multiColumn: {
143
- table: {
144
- disable: true
145
- },
146
- control: false
147
- },
148
- onOpen: {
149
- table: {
150
- disable: true
151
- },
152
- control: false
153
- },
154
- isLoading: {
155
- table: {
156
- disable: true
157
- },
158
- control: false
159
- },
160
- onListScrollBottom: {
161
- table: {
162
- disable: true
163
- },
164
- control: false
165
- },
166
- tooltipPosition: {
167
- table: {
168
- disable: true
169
- },
170
- control: false
171
- },
172
- "data-component": {
173
- table: {
174
- disable: true
175
- },
176
- control: false
177
- },
178
- "data-element": {
179
- table: {
180
- disable: true
181
- },
182
- control: false
183
- },
184
- "data-role": {
185
- table: {
186
- disable: true
187
- },
188
- control: false
189
- }
190
- };
191
202
  Default.args = {
192
203
  mt: 0,
193
204
  listPlacement: undefined,
package/lib/components/tooltip/tooltip.component.js CHANGED
@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
12
12
  var _headless = _interopRequireDefault(require("@tippyjs/react/headless"));
13
13
 
14
+ var _tippy = require("tippy.js");
15
+
14
16
  var _tooltip = _interopRequireDefault(require("./tooltip.style"));
15
17
 
16
18
  var _tooltipPointer = _interopRequireDefault(require("./tooltip-pointer.style"));
@@ -28,6 +30,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
28
30
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
29
31
 
30
32
  const TOOLTIP_DELAY = 100;
33
+ const tippyPlugins = [_tippy.sticky];
31
34
 
32
35
  const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
33
36
  children,
@@ -81,6 +84,8 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
81
84
  }, isVisible !== undefined && {
82
85
  visible: isVisible
83
86
  }, {
87
+ plugins: tippyPlugins,
88
+ sticky: true,
84
89
  render: attrs => tooltip(attrs, message),
85
90
  reference: target,
86
91
  popperOptions: {
package/lib/hooks/__internal__/useInputAccessibility/useInputAccessibility.js CHANGED
@@ -14,7 +14,9 @@ function useInputAccessibility({
14
14
  fieldHelp
15
15
  }) {
16
16
  const labelId = label ? `${id}-label` : undefined;
17
- const validationIconId = [error, warning, info].filter(validation => typeof validation === "string").length ? `${id}-validation-icon` : undefined;
17
+ const validationIconId = [error, warning, info].filter(validation => {
18
+ return validation && typeof validation === "string";
19
+ }).length ? `${id}-validation-icon` : undefined;
18
20
  const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
19
21
  const ariaDescribedBy = [fieldHelpId, validationIconId].filter(Boolean).join(" ");
20
22
  const ariaLabelledBy = labelId;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "104.53.1",
3
+ "version": "104.53.4",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {