carbon-react 104.37.0 → 104.38.2

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 (17) hide show
  1. package/esm/__internal__/sticky-footer/sticky-footer.style.js +1 -1
  2. package/esm/components/button/button.component.js +8 -9
  3. package/esm/components/carousel/slide/slide.style.js +1 -1
  4. package/esm/components/hr/hr.style.js +1 -3
  5. package/esm/components/icon-button/icon-button.component.js +8 -9
  6. package/esm/components/select/multi-select/multi-select.component.js +2 -2
  7. package/esm/components/select/select-list/select-list.style.js +1 -1
  8. package/esm/components/tile-select/__internal__/accordion/accordion.style.js +1 -7
  9. package/lib/__internal__/sticky-footer/sticky-footer.style.js +1 -1
  10. package/lib/components/button/button.component.js +7 -8
  11. package/lib/components/carousel/slide/slide.style.js +1 -1
  12. package/lib/components/hr/hr.style.js +1 -3
  13. package/lib/components/icon-button/icon-button.component.js +7 -8
  14. package/lib/components/select/multi-select/multi-select.component.js +2 -2
  15. package/lib/components/select/select-list/select-list.style.js +1 -1
  16. package/lib/components/tile-select/__internal__/accordion/accordion.style.js +2 -9
  17. package/package.json +1 -1
package/esm/__internal__/sticky-footer/sticky-footer.style.js CHANGED
@@ -14,7 +14,7 @@ const StyledStickyFooter = styled.div`
14
14
  position: sticky;
15
15
  bottom: 0;
16
16
  left: 0;
17
- background-color: var(--colorsComponentsNavigationYang100);
17
+ background-color: var(--colorsActionMinorYang100);
18
18
  box-shadow: var(--boxShadow150);
19
19
  z-index: 1000;
20
20
  `}
package/esm/components/button/button.component.js CHANGED
@@ -1,6 +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
- import React, { useState } from "react";
3
+ import React, { useState, useCallback } from "react";
4
4
  import PropTypes from "prop-types";
5
5
  import propTypes from "@styled-system/prop-types";
6
6
  import Icon from "../icon";
@@ -102,6 +102,12 @@ const Button = ({
102
102
  paddingX = 3;
103
103
  }
104
104
 
105
+ const setRefs = useCallback(reference => {
106
+ setInternalRef(reference);
107
+ if (!forwardRef) return;
108
+ if (typeof forwardRef === "object") forwardRef.current = reference;
109
+ if (typeof forwardRef === "function") forwardRef(reference);
110
+ }, [forwardRef]);
105
111
  return /*#__PURE__*/React.createElement(StyledButton, _extends({
106
112
  "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
107
113
  as: !disabled && href ? "a" : "button",
@@ -123,14 +129,7 @@ const Button = ({
123
129
  }, tagComponent("button", rest), rest, href && {
124
130
  href
125
131
  }, {
126
- ref: reference => {
127
- if (reference) {
128
- setInternalRef(reference);
129
- if (!forwardRef) return;
130
- if (typeof forwardRef === "object") forwardRef.current = reference;
131
- if (typeof forwardRef === "function") forwardRef(reference);
132
- }
133
- }
132
+ ref: setRefs
134
133
  }), renderChildren({
135
134
  iconType,
136
135
  iconPosition,
package/esm/components/carousel/slide/slide.style.js CHANGED
@@ -16,7 +16,7 @@ const SlideStyle = styled.div`
16
16
  opacity: 0.3;
17
17
  margin: 30px 0;
18
18
  box-shadow: var(--boxShadow200);
19
- background-color: var(--colorsComponentsNavigationYang100);
19
+ background-color: var(--colorsUtilityYang100);
20
20
 
21
21
  ${id === selectedIndex && css`
22
22
  transform: scale(1);
package/esm/components/hr/hr.style.js CHANGED
@@ -6,9 +6,7 @@ const StyledHr = styled.hr`
6
6
  width: inherit;
7
7
  border: 0;
8
8
  height: 1px;
9
- background: ${({
10
- theme
11
- }) => theme.hr.background};
9
+ background: var(--colorsUtilityMajor100);
12
10
  `;
13
11
  StyledHr.defaultProps = {
14
12
  theme: baseTheme
package/esm/components/icon-button/icon-button.component.js CHANGED
@@ -1,6 +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
- import React, { useState } from "react";
3
+ import React, { useState, useCallback } from "react";
4
4
  import PropTypes from "prop-types";
5
5
  import styledSystemPropTypes from "@styled-system/prop-types";
6
6
  import Events from "../../__internal__/utils/helpers/events";
@@ -32,18 +32,17 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
32
32
  onAction(e);
33
33
  };
34
34
 
35
+ const setRefs = useCallback(reference => {
36
+ setInternalRef(reference);
37
+ if (!ref) return;
38
+ if (typeof ref === "object") ref.current = reference;
39
+ if (typeof ref === "function") ref(reference);
40
+ }, [ref]);
35
41
  return /*#__PURE__*/React.createElement(StyledIconButton, _extends({}, rest, {
36
42
  "aria-label": ariaLabel,
37
43
  onKeyDown: onKeyDown,
38
44
  onClick: handleOnAction,
39
- ref: reference => {
40
- if (reference) {
41
- setInternalRef(reference);
42
- if (!ref) return;
43
- if (typeof ref === "object") ref.current = reference;
44
- if (typeof ref === "function") ref(reference);
45
- }
46
- },
45
+ ref: setRefs,
47
46
  disabled: disabled
48
47
  }, marginProps), /*#__PURE__*/React.createElement(TooltipProvider, {
49
48
  disabled: disabled,
package/esm/components/select/multi-select/multi-select.component.js CHANGED
@@ -165,7 +165,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
165
165
 
166
166
  isClickTriggeredBySelect.current = false;
167
167
  }, [isOpen]);
168
- const mapValuesToPills = useCallback(() => {
168
+ const mapValuesToPills = useMemo(() => {
169
169
  const canDelete = !disabled && !readOnly;
170
170
 
171
171
  if (!selectedValue.length) {
@@ -384,7 +384,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
384
384
  disabled,
385
385
  readOnly,
386
386
  placeholder: placeholderOverride,
387
- leftChildren: mapValuesToPills(),
387
+ leftChildren: mapValuesToPills,
388
388
  inputRef: assignInput,
389
389
  formattedValue: textValue,
390
390
  selectedValue,
package/esm/components/select/select-list/select-list.style.js CHANGED
@@ -92,7 +92,7 @@ const StyledSelectListTableHeader = styled.thead`
92
92
  bottom: -8px;
93
93
  left: 0px;
94
94
  background-image: linear-gradient(
95
- var(--colorsComponentsNavigationYin100),
95
+ var(--colorsUtilityMajor800),
96
96
  var(--colorsUtilityYang100)
97
97
  );
98
98
  opacity: 0.03;
package/esm/components/tile-select/__internal__/accordion/accordion.style.js CHANGED
@@ -1,17 +1,11 @@
1
1
  import styled from "styled-components";
2
2
  import { StyledAccordionContentContainer, StyledAccordionContent } from "../../../accordion/accordion.style";
3
- import baseTheme from "../../../../style/themes/base";
4
3
  const StyledContentContainer = styled(StyledAccordionContentContainer)`
5
- background-color: ${({
6
- theme
7
- }) => theme.tileSelect.hoverBackground};
4
+ background-color: var(--colorsActionMinor050);
8
5
  `;
9
6
  const StyledContent = styled(StyledAccordionContent)`
10
7
  padding: 24px;
11
8
  position: relative;
12
9
  z-index: 200;
13
10
  `;
14
- StyledContentContainer.defaultProps = {
15
- theme: baseTheme
16
- };
17
11
  export { StyledContentContainer, StyledContent };
package/lib/__internal__/sticky-footer/sticky-footer.style.js CHANGED
@@ -26,7 +26,7 @@ const StyledStickyFooter = _styledComponents.default.div`
26
26
  position: sticky;
27
27
  bottom: 0;
28
28
  left: 0;
29
- background-color: var(--colorsComponentsNavigationYang100);
29
+ background-color: var(--colorsActionMinorYang100);
30
30
  box-shadow: var(--boxShadow150);
31
31
  z-index: 1000;
32
32
  `}
package/lib/components/button/button.component.js CHANGED
@@ -121,6 +121,12 @@ const Button = ({
121
121
  paddingX = 3;
122
122
  }
123
123
 
124
+ const setRefs = (0, _react.useCallback)(reference => {
125
+ setInternalRef(reference);
126
+ if (!forwardRef) return;
127
+ if (typeof forwardRef === "object") forwardRef.current = reference;
128
+ if (typeof forwardRef === "function") forwardRef(reference);
129
+ }, [forwardRef]);
124
130
  return /*#__PURE__*/_react.default.createElement(_button.default, _extends({
125
131
  "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
126
132
  as: !disabled && href ? "a" : "button",
@@ -142,14 +148,7 @@ const Button = ({
142
148
  }, (0, _tags.default)("button", rest), rest, href && {
143
149
  href
144
150
  }, {
145
- ref: reference => {
146
- if (reference) {
147
- setInternalRef(reference);
148
- if (!forwardRef) return;
149
- if (typeof forwardRef === "object") forwardRef.current = reference;
150
- if (typeof forwardRef === "function") forwardRef(reference);
151
- }
152
- }
151
+ ref: setRefs
153
152
  }), renderChildren({
154
153
  iconType,
155
154
  iconPosition,
package/lib/components/carousel/slide/slide.style.js CHANGED
@@ -28,7 +28,7 @@ const SlideStyle = _styledComponents.default.div`
28
28
  opacity: 0.3;
29
29
  margin: 30px 0;
30
30
  box-shadow: var(--boxShadow200);
31
- background-color: var(--colorsComponentsNavigationYang100);
31
+ background-color: var(--colorsUtilityYang100);
32
32
 
33
33
  ${id === selectedIndex && (0, _styledComponents.css)`
34
34
  transform: scale(1);
package/lib/components/hr/hr.style.js CHANGED
@@ -18,9 +18,7 @@ const StyledHr = _styledComponents.default.hr`
18
18
  width: inherit;
19
19
  border: 0;
20
20
  height: 1px;
21
- background: ${({
22
- theme
23
- }) => theme.hr.background};
21
+ background: var(--colorsUtilityMajor100);
24
22
  `;
25
23
  StyledHr.defaultProps = {
26
24
  theme: _base.default
package/lib/components/icon-button/icon-button.component.js CHANGED
@@ -54,18 +54,17 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
54
54
  onAction(e);
55
55
  };
56
56
 
57
+ const setRefs = (0, _react.useCallback)(reference => {
58
+ setInternalRef(reference);
59
+ if (!ref) return;
60
+ if (typeof ref === "object") ref.current = reference;
61
+ if (typeof ref === "function") ref(reference);
62
+ }, [ref]);
57
63
  return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({}, rest, {
58
64
  "aria-label": ariaLabel,
59
65
  onKeyDown: onKeyDown,
60
66
  onClick: handleOnAction,
61
- ref: reference => {
62
- if (reference) {
63
- setInternalRef(reference);
64
- if (!ref) return;
65
- if (typeof ref === "object") ref.current = reference;
66
- if (typeof ref === "function") ref(reference);
67
- }
68
- },
67
+ ref: setRefs,
69
68
  disabled: disabled
70
69
  }, marginProps), /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
71
70
  disabled: disabled,
package/lib/components/select/multi-select/multi-select.component.js CHANGED
@@ -191,7 +191,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
191
191
 
192
192
  isClickTriggeredBySelect.current = false;
193
193
  }, [isOpen]);
194
- const mapValuesToPills = (0, _react.useCallback)(() => {
194
+ const mapValuesToPills = (0, _react.useMemo)(() => {
195
195
  const canDelete = !disabled && !readOnly;
196
196
 
197
197
  if (!selectedValue.length) {
@@ -411,7 +411,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
411
411
  disabled,
412
412
  readOnly,
413
413
  placeholder: placeholderOverride,
414
- leftChildren: mapValuesToPills(),
414
+ leftChildren: mapValuesToPills,
415
415
  inputRef: assignInput,
416
416
  formattedValue: textValue,
417
417
  selectedValue,
package/lib/components/select/select-list/select-list.style.js CHANGED
@@ -109,7 +109,7 @@ const StyledSelectListTableHeader = _styledComponents.default.thead`
109
109
  bottom: -8px;
110
110
  left: 0px;
111
111
  background-image: linear-gradient(
112
- var(--colorsComponentsNavigationYin100),
112
+ var(--colorsUtilityMajor800),
113
113
  var(--colorsUtilityYang100)
114
114
  );
115
115
  opacity: 0.03;
package/lib/components/tile-select/__internal__/accordion/accordion.style.js CHANGED
@@ -9,14 +9,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
 
10
10
  var _accordion = require("../../../accordion/accordion.style");
11
11
 
12
- var _base = _interopRequireDefault(require("../../../../style/themes/base"));
13
-
14
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
13
 
16
14
  const StyledContentContainer = (0, _styledComponents.default)(_accordion.StyledAccordionContentContainer)`
17
- background-color: ${({
18
- theme
19
- }) => theme.tileSelect.hoverBackground};
15
+ background-color: var(--colorsActionMinor050);
20
16
  `;
21
17
  exports.StyledContentContainer = StyledContentContainer;
22
18
  const StyledContent = (0, _styledComponents.default)(_accordion.StyledAccordionContent)`
@@ -24,7 +20,4 @@ const StyledContent = (0, _styledComponents.default)(_accordion.StyledAccordionC
24
20
  position: relative;
25
21
  z-index: 200;
26
22
  `;
27
- exports.StyledContent = StyledContent;
28
- StyledContentContainer.defaultProps = {
29
- theme: _base.default
30
- };
23
+ exports.StyledContent = StyledContent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "104.37.0",
3
+ "version": "104.38.2",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {