carbon-react 141.0.3 → 141.0.5

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 (7) hide show
  1. package/esm/components/dialog/dialog.component.d.ts +1 -1
  2. package/esm/components/dialog/dialog.component.js +3 -1
  3. package/esm/components/menu/menu-item/menu-item.style.js +149 -142
  4. package/lib/components/dialog/dialog.component.d.ts +1 -1
  5. package/lib/components/dialog/dialog.component.js +3 -1
  6. package/lib/components/menu/menu-item/menu-item.style.js +149 -142
  7. package/package.json +1 -1
package/esm/components/dialog/dialog.component.d.ts CHANGED
@@ -10,7 +10,7 @@ export interface ContentPaddingInterface {
10
10
  py?: PaddingValues;
11
11
  px?: PaddingValues;
12
12
  }
13
- export interface DialogProps extends ModalProps, Omit<TagProps, "data-component"> {
13
+ export interface DialogProps extends ModalProps, TagProps {
14
14
  /** Custom class name */
15
15
  className?: string;
16
16
  /** Prop to specify the aria-describedby property of the Dialog component */
package/esm/components/dialog/dialog.component.js CHANGED
@@ -16,6 +16,7 @@ import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
16
16
  const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
17
17
  const Dialog = /*#__PURE__*/forwardRef(({
18
18
  className,
19
+ "data-component": dataComponent = "dialog",
19
20
  "data-element": dataElement = "dialog",
20
21
  "data-role": dataRole,
21
22
  children,
@@ -166,7 +167,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
166
167
  isOpen: open,
167
168
  additionalWrapperRefs: focusableContainers
168
169
  }, /*#__PURE__*/React.createElement(StyledDialog, _extends({
169
- "data-component": "dialog",
170
+ "data-component": dataComponent,
170
171
  "data-element": dataElement,
171
172
  "data-role": dataRole,
172
173
  "aria-modal": isTopModal ? true : undefined,
@@ -202,6 +203,7 @@ if (process.env.NODE_ENV !== "production") {
202
203
  "px": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
203
204
  "py": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
204
205
  }),
206
+ "data-component": PropTypes.string,
205
207
  "data-element": PropTypes.string,
206
208
  "data-role": PropTypes.string,
207
209
  "disableAutoFocus": PropTypes.bool,
package/esm/components/menu/menu-item/menu-item.style.js CHANGED
@@ -30,8 +30,9 @@ const StyledMenuItemWrapper = styled.a.attrs({
30
30
  hasInput
31
31
  }) => css`
32
32
  ${!inFullscreenView && css`
33
- ${padding}
34
- `}
33
+ ${padding}
34
+ `}
35
+
35
36
  display: inline-block;
36
37
  font-size: 14px;
37
38
  font-weight: 700;
@@ -44,67 +45,73 @@ const StyledMenuItemWrapper = styled.a.attrs({
44
45
  cursor: pointer;
45
46
  }
46
47
 
47
- a:focus,
48
- button:focus {
49
- ${({
48
+ a:focus,
49
+ button:focus {
50
+ ${({
50
51
  theme
51
- }) => `${!theme.focusRedesignOptOut ? addFocusStyling(true) : /* istanbul ignore next */oldFocusStyling}`}
52
- }
52
+ }) => `${!theme.focusRedesignOptOut ? addFocusStyling(true) : /* istanbul ignore next */oldFocusStyling}
53
+ `}
54
+ }
55
+
56
+ a button:not(.search-button) {
57
+ position: relative;
58
+ top: -1px;
53
59
  }
54
60
 
55
61
  ${!overrideColor && css`
56
- background-color: ${menuConfigVariants[menuType].background};
57
- `}
62
+ background-color: ${menuConfigVariants[menuType].background};
63
+ `}
58
64
 
59
65
  ${overrideColor && css`
60
- &&&& {
61
- background-color: ${variant === "alternate" ? menuConfigVariants[menuType].alternate : menuConfigVariants[menuType].submenuItemBackground};
62
- }
63
- `}
66
+ &&&& {
67
+ background-color: ${variant === "alternate" ? menuConfigVariants[menuType].alternate : menuConfigVariants[menuType].submenuItemBackground};
68
+ }
69
+ `}
64
70
 
65
71
  ${!inFullscreenView && css`
66
- max-width: inherit;
67
-
68
- && {
69
- a:focus,
70
- button:focus {
71
- background-color: ${menuConfigVariants[menuType].background};
72
- color: ${menuConfigVariants[menuType].color};
73
- z-index: 1;
74
- position: relative;
75
- }
76
- }
72
+ max-width: inherit;
77
73
 
78
- &&& {
79
- a,
80
- button {
81
- ${maxWidth && css`
82
- box-sizing: border-box;
83
- max-width: inherit;
84
- text-overflow: ellipsis;
85
- overflow: hidden;
86
- white-space: nowrap;
87
- vertical-align: bottom;
88
- `}
89
- }
74
+ && {
75
+ a:focus,
76
+ button:focus {
77
+ background-color: ${menuConfigVariants[menuType].background};
78
+ color: ${menuConfigVariants[menuType].color};
79
+ z-index: 1;
80
+ position: relative;
81
+ }
82
+ }
90
83
 
91
- a:hover,
92
- button:hover {
93
- ${!asDiv && css`
94
- background-color: var(--colorsComponentsMenuAutumnStandard600);
95
- color: var(--colorsComponentsMenuYang100);
84
+ &&& {
85
+ a,
86
+ button {
87
+ ${maxWidth && css`
88
+ box-sizing: border-box;
89
+ max-width: inherit;
90
+ text-overflow: ellipsis;
91
+ overflow: hidden;
92
+ white-space: nowrap;
93
+ vertical-align: bottom;
94
+ `}
95
+ height: 40px;
96
+ }
96
97
 
97
- [data-component="icon"] {
98
- color: var(--colorsComponentsMenuYang100);
99
- }
100
- `}
98
+ a:hover,
99
+ button:hover {
100
+ ${!asDiv && css`
101
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
102
+ color: var(--colorsComponentsMenuYang100);
101
103
 
102
- ::before {
103
- border-top-color: var(--colorsComponentsMenuYang100);
104
+ [data-component="icon"] {
105
+ color: var(--colorsComponentsMenuYang100);
104
106
  }
107
+ `}
108
+
109
+ ::before {
110
+ border-top-color: var(--colorsComponentsMenuYang100);
105
111
  }
106
112
  }
107
- `}
113
+ }
114
+ `}
108
115
 
109
116
  ${asPassiveItem ? `
110
117
  ${StyledIconButton} {
@@ -137,9 +144,9 @@ const StyledMenuItemWrapper = styled.a.attrs({
137
144
  text-align: left;
138
145
 
139
146
  ${inFullscreenView && css`
140
- height: auto;
141
- white-space: normal;
142
- `}
147
+ height: auto;
148
+ white-space: normal;
149
+ `}
143
150
  }
144
151
 
145
152
  &&& {
@@ -155,127 +162,127 @@ const StyledMenuItemWrapper = styled.a.attrs({
155
162
  }
156
163
 
157
164
  ${!inFullscreenView && css`
158
- a > ${StyledIcon}, button > ${StyledIcon} {
159
- display: inline-block;
160
- }
161
- `}
165
+ a > ${StyledIcon}, button > ${StyledIcon} {
166
+ display: inline-block;
167
+ }
168
+ `}
162
169
  }
163
170
 
164
171
  ${selected && css`
172
+ background-color: ${menuConfigVariants[menuType].selected};
173
+
174
+ a:focus,
175
+ button:focus {
165
176
  background-color: ${menuConfigVariants[menuType].selected};
177
+ }
166
178
 
167
- a:focus,
168
- button:focus {
169
- background-color: ${menuConfigVariants[menuType].selected};
170
- }
179
+ a:hover,
180
+ button:hover {
181
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
182
+ }
183
+ `}
171
184
 
172
- a:hover,
173
- button:hover {
174
- background-color: var(--colorsComponentsMenuAutumnStandard600);
185
+ ${variant === "alternate" && !inFullscreenView && css`
186
+ &&& {
187
+ background-color: ${menuConfigVariants[menuType].alternate};
188
+ }
189
+
190
+ &&& a:focus,
191
+ &&& button:focus {
192
+ background-color: ${menuConfigVariants[menuType].alternate};
193
+ }
194
+
195
+ ${!hasInput && css`
196
+ &&& a:hover,
197
+ &&& button:hover {
198
+ background-color: ${menuConfigVariants[menuType].alternateHover};
175
199
  }
176
200
  `}
201
+ `}
177
202
 
178
- ${variant === "alternate" && !inFullscreenView && css`
179
- &&& {
180
- background-color: ${menuConfigVariants[menuType].alternate};
181
- }
203
+ ${isOpen && css`
204
+ a,
205
+ button {
206
+ background-color: ${menuConfigVariants[menuType].submenuItemBackground};
207
+ color: ${menuConfigVariants[menuType].color};
208
+ }
209
+ `}
210
+
211
+ ${hasSubmenu && css`
212
+ background-color: ${menuConfigVariants[menuType].submenuBackground};
213
+
214
+ a:focus,
215
+ button:focus {
216
+ background-color: ${menuConfigVariants[menuType].submenuBackground};
217
+ color: ${menuConfigVariants[menuType].color};
182
218
 
183
- &&& a:focus,
184
- &&& button:focus {
185
- background-color: ${menuConfigVariants[menuType].alternate};
219
+ [data-component="icon"] {
220
+ color: ${menuConfigVariants[menuType].color};
186
221
  }
187
222
 
188
- ${!hasInput && css`
189
- &&& a:hover,
190
- &&& button:hover {
191
- background-color: ${menuConfigVariants[menuType].alternateHover};
192
- }
223
+ ${clickToOpen && isOpen && css`
224
+ background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
193
225
  `}
194
- `}
226
+ }
195
227
 
196
- ${isOpen && css`
197
- a,
198
- button {
228
+ a:hover,
229
+ button:hover {
230
+ background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
231
+ color: var(--colorsComponentsMenuYang100);
232
+
233
+ ${!(href || clickToOpen) && css`
234
+ cursor: default;
199
235
  background-color: ${menuConfigVariants[menuType].submenuItemBackground};
200
236
  color: ${menuConfigVariants[menuType].color};
237
+ `}
238
+
239
+ [data-component="icon"] {
240
+ color: ${menuConfigVariants[menuType].color};
201
241
  }
202
- `}
242
+ }
203
243
 
204
- ${hasSubmenu && css`
205
- background-color: ${menuConfigVariants[menuType].submenuBackground};
244
+ ${selected && css`
245
+ background-color: ${menuConfigVariants[menuType].submenuSelected};
206
246
 
207
247
  a:focus,
208
248
  button:focus {
209
- background-color: ${menuConfigVariants[menuType].submenuBackground};
210
- color: ${menuConfigVariants[menuType].color};
211
-
212
- [data-component="icon"] {
213
- color: ${menuConfigVariants[menuType].color};
214
- }
215
-
216
- ${clickToOpen && isOpen && css`
217
- background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
218
- `}
249
+ background-color: ${menuConfigVariants[menuType].submenuSelected};
219
250
  }
220
251
 
221
252
  a:hover,
222
253
  button:hover {
223
- background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
254
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
224
255
  color: var(--colorsComponentsMenuYang100);
225
-
226
- ${!(href || clickToOpen) && css`
227
- cursor: default;
228
- background-color: ${menuConfigVariants[menuType].submenuItemBackground};
229
- color: ${menuConfigVariants[menuType].color};
230
- `}
231
-
232
- [data-component="icon"] {
233
- color: ${menuConfigVariants[menuType].color};
234
- }
235
256
  }
257
+ `}
236
258
 
237
- ${selected && css`
238
- background-color: ${menuConfigVariants[menuType].submenuSelected};
239
-
240
- a:focus,
241
- button:focus {
242
- background-color: ${menuConfigVariants[menuType].submenuSelected};
243
- }
244
-
245
- a:hover,
246
- button:hover {
247
- background-color: var(--colorsComponentsMenuAutumnStandard600);
248
- color: var(--colorsComponentsMenuYang100);
249
- }
250
- `}
251
-
252
- ${showDropdownArrow && css`
253
- > a,
254
- > button:not(${StyledIconButton}) {
255
- padding-right: 32px;
256
- }
259
+ ${showDropdownArrow && css`
260
+ > a,
261
+ > button:not(${StyledIconButton}) {
262
+ padding-right: 32px;
263
+ }
257
264
 
258
- a::before,
259
- button::before {
260
- display: block;
261
- margin-top: -2px;
262
- pointer-events: none;
263
- position: absolute;
264
- right: 16px;
265
- top: 50%;
266
- z-index: 2;
267
- content: "";
268
- width: 0;
269
- height: 0;
270
- border-width: 5px 4px 4px;
271
- border-style: solid;
272
- border-top-color: initial;
273
- border-right-color: transparent;
274
- border-bottom-color: transparent;
275
- border-left-color: transparent;
276
- }
277
- `}
265
+ a::before,
266
+ button::before {
267
+ display: block;
268
+ margin-top: -2px;
269
+ pointer-events: none;
270
+ position: absolute;
271
+ right: 16px;
272
+ top: 50%;
273
+ z-index: 2;
274
+ content: "";
275
+ width: 0;
276
+ height: 0;
277
+ border-width: 5px 4px 4px;
278
+ border-style: solid;
279
+ border-top-color: initial;
280
+ border-right-color: transparent;
281
+ border-bottom-color: transparent;
282
+ border-left-color: transparent;
283
+ }
278
284
  `}
285
+ `}
279
286
 
280
287
  ${inFullscreenView && css`
281
288
  ${asDiv && css`
package/lib/components/dialog/dialog.component.d.ts CHANGED
@@ -10,7 +10,7 @@ export interface ContentPaddingInterface {
10
10
  py?: PaddingValues;
11
11
  px?: PaddingValues;
12
12
  }
13
- export interface DialogProps extends ModalProps, Omit<TagProps, "data-component"> {
13
+ export interface DialogProps extends ModalProps, TagProps {
14
14
  /** Custom class name */
15
15
  className?: string;
16
16
  /** Prop to specify the aria-describedby property of the Dialog component */
package/lib/components/dialog/dialog.component.js CHANGED
@@ -25,6 +25,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
25
25
  const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
26
26
  const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
27
27
  className,
28
+ "data-component": dataComponent = "dialog",
28
29
  "data-element": dataElement = "dialog",
29
30
  "data-role": dataRole,
30
31
  children,
@@ -175,7 +176,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
175
176
  isOpen: open,
176
177
  additionalWrapperRefs: focusableContainers
177
178
  }, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialog, _extends({
178
- "data-component": "dialog",
179
+ "data-component": dataComponent,
179
180
  "data-element": dataElement,
180
181
  "data-role": dataRole,
181
182
  "aria-modal": isTopModal ? true : undefined,
@@ -211,6 +212,7 @@ if (process.env.NODE_ENV !== "production") {
211
212
  "px": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
212
213
  "py": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
213
214
  }),
215
+ "data-component": _propTypes.default.string,
214
216
  "data-element": _propTypes.default.string,
215
217
  "data-role": _propTypes.default.string,
216
218
  "disableAutoFocus": _propTypes.default.bool,
package/lib/components/menu/menu-item/menu-item.style.js CHANGED
@@ -39,8 +39,9 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
39
39
  hasInput
40
40
  }) => (0, _styledComponents.css)`
41
41
  ${!inFullscreenView && (0, _styledComponents.css)`
42
- ${_styledSystem.padding}
43
- `}
42
+ ${_styledSystem.padding}
43
+ `}
44
+
44
45
  display: inline-block;
45
46
  font-size: 14px;
46
47
  font-weight: 700;
@@ -53,67 +54,73 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
53
54
  cursor: pointer;
54
55
  }
55
56
 
56
- a:focus,
57
- button:focus {
58
- ${({
57
+ a:focus,
58
+ button:focus {
59
+ ${({
59
60
  theme
60
- }) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)(true) : /* istanbul ignore next */oldFocusStyling}`}
61
- }
61
+ }) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)(true) : /* istanbul ignore next */oldFocusStyling}
62
+ `}
63
+ }
64
+
65
+ a button:not(.search-button) {
66
+ position: relative;
67
+ top: -1px;
62
68
  }
63
69
 
64
70
  ${!overrideColor && (0, _styledComponents.css)`
65
- background-color: ${_menu.default[menuType].background};
66
- `}
71
+ background-color: ${_menu.default[menuType].background};
72
+ `}
67
73
 
68
74
  ${overrideColor && (0, _styledComponents.css)`
69
- &&&& {
70
- background-color: ${variant === "alternate" ? _menu.default[menuType].alternate : _menu.default[menuType].submenuItemBackground};
71
- }
72
- `}
75
+ &&&& {
76
+ background-color: ${variant === "alternate" ? _menu.default[menuType].alternate : _menu.default[menuType].submenuItemBackground};
77
+ }
78
+ `}
73
79
 
74
80
  ${!inFullscreenView && (0, _styledComponents.css)`
75
- max-width: inherit;
76
-
77
- && {
78
- a:focus,
79
- button:focus {
80
- background-color: ${_menu.default[menuType].background};
81
- color: ${_menu.default[menuType].color};
82
- z-index: 1;
83
- position: relative;
84
- }
85
- }
81
+ max-width: inherit;
86
82
 
87
- &&& {
88
- a,
89
- button {
90
- ${maxWidth && (0, _styledComponents.css)`
91
- box-sizing: border-box;
92
- max-width: inherit;
93
- text-overflow: ellipsis;
94
- overflow: hidden;
95
- white-space: nowrap;
96
- vertical-align: bottom;
97
- `}
98
- }
83
+ && {
84
+ a:focus,
85
+ button:focus {
86
+ background-color: ${_menu.default[menuType].background};
87
+ color: ${_menu.default[menuType].color};
88
+ z-index: 1;
89
+ position: relative;
90
+ }
91
+ }
99
92
 
100
- a:hover,
101
- button:hover {
102
- ${!asDiv && (0, _styledComponents.css)`
103
- background-color: var(--colorsComponentsMenuAutumnStandard600);
104
- color: var(--colorsComponentsMenuYang100);
93
+ &&& {
94
+ a,
95
+ button {
96
+ ${maxWidth && (0, _styledComponents.css)`
97
+ box-sizing: border-box;
98
+ max-width: inherit;
99
+ text-overflow: ellipsis;
100
+ overflow: hidden;
101
+ white-space: nowrap;
102
+ vertical-align: bottom;
103
+ `}
104
+ height: 40px;
105
+ }
105
106
 
106
- [data-component="icon"] {
107
- color: var(--colorsComponentsMenuYang100);
108
- }
109
- `}
107
+ a:hover,
108
+ button:hover {
109
+ ${!asDiv && (0, _styledComponents.css)`
110
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
111
+ color: var(--colorsComponentsMenuYang100);
110
112
 
111
- ::before {
112
- border-top-color: var(--colorsComponentsMenuYang100);
113
+ [data-component="icon"] {
114
+ color: var(--colorsComponentsMenuYang100);
113
115
  }
116
+ `}
117
+
118
+ ::before {
119
+ border-top-color: var(--colorsComponentsMenuYang100);
114
120
  }
115
121
  }
116
- `}
122
+ }
123
+ `}
117
124
 
118
125
  ${asPassiveItem ? `
119
126
  ${_iconButton.default} {
@@ -146,9 +153,9 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
146
153
  text-align: left;
147
154
 
148
155
  ${inFullscreenView && (0, _styledComponents.css)`
149
- height: auto;
150
- white-space: normal;
151
- `}
156
+ height: auto;
157
+ white-space: normal;
158
+ `}
152
159
  }
153
160
 
154
161
  &&& {
@@ -164,127 +171,127 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
164
171
  }
165
172
 
166
173
  ${!inFullscreenView && (0, _styledComponents.css)`
167
- a > ${_icon.default}, button > ${_icon.default} {
168
- display: inline-block;
169
- }
170
- `}
174
+ a > ${_icon.default}, button > ${_icon.default} {
175
+ display: inline-block;
176
+ }
177
+ `}
171
178
  }
172
179
 
173
180
  ${selected && (0, _styledComponents.css)`
181
+ background-color: ${_menu.default[menuType].selected};
182
+
183
+ a:focus,
184
+ button:focus {
174
185
  background-color: ${_menu.default[menuType].selected};
186
+ }
175
187
 
176
- a:focus,
177
- button:focus {
178
- background-color: ${_menu.default[menuType].selected};
179
- }
188
+ a:hover,
189
+ button:hover {
190
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
191
+ }
192
+ `}
180
193
 
181
- a:hover,
182
- button:hover {
183
- background-color: var(--colorsComponentsMenuAutumnStandard600);
194
+ ${variant === "alternate" && !inFullscreenView && (0, _styledComponents.css)`
195
+ &&& {
196
+ background-color: ${_menu.default[menuType].alternate};
197
+ }
198
+
199
+ &&& a:focus,
200
+ &&& button:focus {
201
+ background-color: ${_menu.default[menuType].alternate};
202
+ }
203
+
204
+ ${!hasInput && (0, _styledComponents.css)`
205
+ &&& a:hover,
206
+ &&& button:hover {
207
+ background-color: ${_menu.default[menuType].alternateHover};
184
208
  }
185
209
  `}
210
+ `}
186
211
 
187
- ${variant === "alternate" && !inFullscreenView && (0, _styledComponents.css)`
188
- &&& {
189
- background-color: ${_menu.default[menuType].alternate};
190
- }
212
+ ${isOpen && (0, _styledComponents.css)`
213
+ a,
214
+ button {
215
+ background-color: ${_menu.default[menuType].submenuItemBackground};
216
+ color: ${_menu.default[menuType].color};
217
+ }
218
+ `}
219
+
220
+ ${hasSubmenu && (0, _styledComponents.css)`
221
+ background-color: ${_menu.default[menuType].submenuBackground};
222
+
223
+ a:focus,
224
+ button:focus {
225
+ background-color: ${_menu.default[menuType].submenuBackground};
226
+ color: ${_menu.default[menuType].color};
191
227
 
192
- &&& a:focus,
193
- &&& button:focus {
194
- background-color: ${_menu.default[menuType].alternate};
228
+ [data-component="icon"] {
229
+ color: ${_menu.default[menuType].color};
195
230
  }
196
231
 
197
- ${!hasInput && (0, _styledComponents.css)`
198
- &&& a:hover,
199
- &&& button:hover {
200
- background-color: ${_menu.default[menuType].alternateHover};
201
- }
232
+ ${clickToOpen && isOpen && (0, _styledComponents.css)`
233
+ background-color: ${_menu.default[menuType].submenuOpenedBackground};
202
234
  `}
203
- `}
235
+ }
204
236
 
205
- ${isOpen && (0, _styledComponents.css)`
206
- a,
207
- button {
237
+ a:hover,
238
+ button:hover {
239
+ background-color: ${_menu.default[menuType].submenuOpenedBackground};
240
+ color: var(--colorsComponentsMenuYang100);
241
+
242
+ ${!(href || clickToOpen) && (0, _styledComponents.css)`
243
+ cursor: default;
208
244
  background-color: ${_menu.default[menuType].submenuItemBackground};
209
245
  color: ${_menu.default[menuType].color};
246
+ `}
247
+
248
+ [data-component="icon"] {
249
+ color: ${_menu.default[menuType].color};
210
250
  }
211
- `}
251
+ }
212
252
 
213
- ${hasSubmenu && (0, _styledComponents.css)`
214
- background-color: ${_menu.default[menuType].submenuBackground};
253
+ ${selected && (0, _styledComponents.css)`
254
+ background-color: ${_menu.default[menuType].submenuSelected};
215
255
 
216
256
  a:focus,
217
257
  button:focus {
218
- background-color: ${_menu.default[menuType].submenuBackground};
219
- color: ${_menu.default[menuType].color};
220
-
221
- [data-component="icon"] {
222
- color: ${_menu.default[menuType].color};
223
- }
224
-
225
- ${clickToOpen && isOpen && (0, _styledComponents.css)`
226
- background-color: ${_menu.default[menuType].submenuOpenedBackground};
227
- `}
258
+ background-color: ${_menu.default[menuType].submenuSelected};
228
259
  }
229
260
 
230
261
  a:hover,
231
262
  button:hover {
232
- background-color: ${_menu.default[menuType].submenuOpenedBackground};
263
+ background-color: var(--colorsComponentsMenuAutumnStandard600);
233
264
  color: var(--colorsComponentsMenuYang100);
234
-
235
- ${!(href || clickToOpen) && (0, _styledComponents.css)`
236
- cursor: default;
237
- background-color: ${_menu.default[menuType].submenuItemBackground};
238
- color: ${_menu.default[menuType].color};
239
- `}
240
-
241
- [data-component="icon"] {
242
- color: ${_menu.default[menuType].color};
243
- }
244
265
  }
266
+ `}
245
267
 
246
- ${selected && (0, _styledComponents.css)`
247
- background-color: ${_menu.default[menuType].submenuSelected};
248
-
249
- a:focus,
250
- button:focus {
251
- background-color: ${_menu.default[menuType].submenuSelected};
252
- }
253
-
254
- a:hover,
255
- button:hover {
256
- background-color: var(--colorsComponentsMenuAutumnStandard600);
257
- color: var(--colorsComponentsMenuYang100);
258
- }
259
- `}
260
-
261
- ${showDropdownArrow && (0, _styledComponents.css)`
262
- > a,
263
- > button:not(${_iconButton.default}) {
264
- padding-right: 32px;
265
- }
268
+ ${showDropdownArrow && (0, _styledComponents.css)`
269
+ > a,
270
+ > button:not(${_iconButton.default}) {
271
+ padding-right: 32px;
272
+ }
266
273
 
267
- a::before,
268
- button::before {
269
- display: block;
270
- margin-top: -2px;
271
- pointer-events: none;
272
- position: absolute;
273
- right: 16px;
274
- top: 50%;
275
- z-index: 2;
276
- content: "";
277
- width: 0;
278
- height: 0;
279
- border-width: 5px 4px 4px;
280
- border-style: solid;
281
- border-top-color: initial;
282
- border-right-color: transparent;
283
- border-bottom-color: transparent;
284
- border-left-color: transparent;
285
- }
286
- `}
274
+ a::before,
275
+ button::before {
276
+ display: block;
277
+ margin-top: -2px;
278
+ pointer-events: none;
279
+ position: absolute;
280
+ right: 16px;
281
+ top: 50%;
282
+ z-index: 2;
283
+ content: "";
284
+ width: 0;
285
+ height: 0;
286
+ border-width: 5px 4px 4px;
287
+ border-style: solid;
288
+ border-top-color: initial;
289
+ border-right-color: transparent;
290
+ border-bottom-color: transparent;
291
+ border-left-color: transparent;
292
+ }
287
293
  `}
294
+ `}
288
295
 
289
296
  ${inFullscreenView && (0, _styledComponents.css)`
290
297
  ${asDiv && (0, _styledComponents.css)`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "141.0.3",
3
+ "version": "141.0.5",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",