carbon-react 104.25.0 → 104.27.0

package/lib/components/advanced-color-picker/advanced-color-picker-cell.style.js

@@ -18,7 +18,7 @@ const StyledAdvancedColorPickerCell = _styledComponents.default.button.attrs({
   display: block;
   width: 25px;
   height: 25px;
-  border: 1px solid #516562;
+  border: 1px solid var(--colorsUtilityYin090);
   ${({
   color
 }) => color && (0, _styledComponents.css)`
@@ -37,7 +37,7 @@ const StyledAdvancedColorPickerCell = _styledComponents.default.button.attrs({
   }
 
   &:focus {
-    outline: solid 3px #ffb500;
+    outline: solid 3px var(--colorsSemanticFocus500);
   }
 
   &::-moz-focus-inner {

package/lib/components/advanced-color-picker/advanced-color-picker.style.js

@@ -49,7 +49,7 @@ const StyledAdvancedColorPickerPreview = _styledComponents.default.div`
   width: 25px;
   height: 25px;
   margin-bottom: 15px;
-  border: 1px solid #516562;
+  border: 1px solid var(--colorsUtilityYin090);
 
   ${({
   color
@@ -82,7 +82,7 @@ const DialogStyle = (0, _styledComponents.default)(_dialog2.default)`
   ${_simpleColorPicker.StyledColorOptions} {
     max-width: 285px;
     ${_simpleColor.default} {
-      border: 1px solid #3c514e;
+      border: 1px solid var(--colorsUtilityYin090);
       margin-right: -1px;
       margin-bottom: -1px;
       transition: all 0.2s ease;
@@ -101,5 +101,9 @@ const DialogStyle = (0, _styledComponents.default)(_dialog2.default)`
     top: 20px;
     right: 13px;
   }
+
+  [data-component="icon"] {
+    color: var(--colorsActionMinorYin065);
+  }
 `;
 exports.DialogStyle = DialogStyle;

package/lib/components/duelling-picklist/picklist-group/picklist-group.style.js

@@ -7,14 +7,10 @@ exports.StyledGroupButton = exports.StyledPicklistGroup = exports.StyledPicklist
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
 var _button = require("../../button");
 
 var _picklistItem = require("../picklist-item/picklist-item.style");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -22,8 +18,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledGroupWrapper = _styledComponents.default.li`
   ${({
   highlighted,
-  type,
-  theme
+  type
 }) => (0, _styledComponents.css)`
     &:not(:first-of-type) {
       margin-top: 16px;
@@ -31,8 +26,7 @@ const StyledGroupWrapper = _styledComponents.default.li`
 
     ${highlighted && (0, _styledComponents.css)`
       ${_picklistItem.StyledButton} {
-        background: ${type === "add" ? theme.colors.secondary : theme.colors.destructive.hover};
-      }
+        background: ${type === "add" ? "var(--colorsActionMajor600)" : "var(--colorsSemanticNegative600)"}
     `}
   `}
 `;
@@ -50,8 +44,7 @@ const StyledPicklistGroup = _styledComponents.default.li`
 exports.StyledPicklistGroup = StyledPicklistGroup;
 const StyledGroupButton = (0, _styledComponents.default)(_button.ButtonWithForwardRef)`
   ${({
-  iconType,
-  theme
+  iconType
 }) => (0, _styledComponents.css)`
     padding: 0;
     margin-right: 0;
@@ -62,16 +55,9 @@ const StyledGroupButton = (0, _styledComponents.default)(_button.ButtonWithForwa
 
     &:focus {
       > span {
-        color: ${theme.colors.white};
+        color: var(--colorsActionMajorYang100);
       }
-      background: ${iconType === "add" ? theme.colors.secondary : theme.colors.destructive.hover};
-    }
+      background: ${iconType === "add" ? "var(--colorsActionMajor600)" : "var(--colorsSemanticNegative600)"}
   `}
 `;
-exports.StyledGroupButton = StyledGroupButton;
-StyledGroupWrapper.defaultProps = {
-  theme: _base.default
-};
-StyledGroupButton.defaultProps = {
-  theme: _base.default
-};
+exports.StyledGroupButton = StyledGroupButton;

package/lib/components/duelling-picklist/picklist-item/picklist-item.style.js

@@ -7,8 +7,6 @@ exports.StyledLockIcon = exports.StyledButton = exports.StyledPicklistItem = voi
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
 var _button = require("../../button");
 
 var _icon = _interopRequireDefault(require("../../icon"));
@@ -23,26 +21,24 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const StyledPicklistItem = _styledComponents.default.li`
   ${({
-  locked,
-  theme
+  locked
 }) => (0, _styledComponents.css)`
     display: flex;
     align-items: center;
     width: 100%;
 
-    background-color: ${locked ? theme.picklist.locked : theme.colors.white};
+    background-color: ${locked ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"};
 
     ${!locked && (0, _styledComponents.css)`
-      box-shadow: 0 2px 4px 0 rgba(0, 20, 29, 0.15),
-        0 3px 3px 0 rgba(0, 20, 29, 0.2);
+      box-shadow: var(--boxShadow050);
     `}
 
     ${locked && (0, _styledComponents.css)`
-      border: 1px solid ${theme.picklist.lockedContent};
-      color: ${theme.picklist.lockedText};
+      border: 1px solid var(--colorsUtilityMajor200);
+      color: var(--colorsUtilityYin065);
 
       ${_icon2.default} {
-        color: ${theme.picklist.lockedContent};
+        color: var(--colorsUtilityMajor200);
       }
     `}
 
@@ -54,8 +50,7 @@ const StyledPicklistItem = _styledComponents.default.li`
 exports.StyledPicklistItem = StyledPicklistItem;
 const StyledButton = (0, _styledComponents.default)(_button.ButtonWithForwardRef)`
   ${({
-  iconType,
-  theme
+  iconType
 }) => (0, _styledComponents.css)`
     padding: 0;
     margin-right: 0;
@@ -64,11 +59,7 @@ const StyledButton = (0, _styledComponents.default)(_button.ButtonWithForwardRef
     min-width: 40px;
 
     &:focus {
-      > span {
-        color: ${theme.colors.white};
-      }
-      background: ${iconType === "add" ? theme.colors.secondary : theme.colors.destructive.hover};
-    }
+      background: ${iconType === "add" ? "var(--colorsActionMajor600)" : "var(--colorsSemanticNegative600)"};
   `}
 `;
 exports.StyledButton = StyledButton;
@@ -77,10 +68,4 @@ const StyledLockIcon = (0, _styledComponents.default)(_icon.default)`
   height: 40px;
   min-width: 40px;
 `;
-exports.StyledLockIcon = StyledLockIcon;
-StyledPicklistItem.defaultProps = {
-  theme: _base.default
-};
-StyledButton.defaultProps = {
-  theme: _base.default
-};
+exports.StyledLockIcon = StyledLockIcon;

package/lib/components/search/search.component.js

@@ -63,10 +63,12 @@ const Search = ({
   const [searchValue, setSearchValue] = (0, _react.useState)(initialValue);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [searchIsActive, setSearchIsActive] = (0, _react.useState)(initialValue.length >= threshold);
+  (0, _react.useEffect)(() => {
+    setSearchIsActive(!isControlled ? searchValue.length >= threshold : value.length >= threshold);
+  }, [isControlled, searchValue, threshold, value]);
   const [iconType, iconTabIndex] = (0, _react.useMemo)(() => {
     const isSearchValueEmpty = !isControlled ? searchValue.length === 0 : value.length === 0;
     const isFocusedOrActive = isFocused || searchIsActive || (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === document.activeElement;
-    setSearchIsActive(!isControlled ? searchValue.length >= threshold : value.length >= threshold);
 
     if (!isSearchValueEmpty) {
       return ["cross", 0];
@@ -89,8 +91,12 @@ const Search = ({
     }
   };
 
-  const handleOnFocus = () => {
+  const handleFocus = e => {
     setIsFocused(true);
+
+    if (onFocus) {
+      onFocus(e);
+    }
   };
 
   let buttonProps = {};
@@ -130,14 +136,22 @@ const Search = ({
     ev.preventDefault();
   };
 
-  const handleBlur = () => {
+  const handleBlur = e => {
     setIsFocused(false);
+
+    if (onBlur) {
+      onBlur(e);
+    }
   };
 
   const handleKeyDown = ev => {
     if (_events.default.isAlphabetKey(ev) || _events.default.isNumberKey(ev)) {
       ev.stopPropagation();
     }
+
+    if (onKeyDown) {
+      onKeyDown(ev);
+    }
   };
 
   const assignInput = input => {
@@ -156,11 +170,6 @@ const Search = ({
     mb: 0
   }, (0, _utils.filterStyledSystemMarginProps)(rest), (0, _tags.default)("search", rest), {
     id: id,
-    onFocus: handleOnFocus,
-    onClick: handleOnFocus,
-    onBlur: handleBlur,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
     name: name
   }, rest), /*#__PURE__*/_react.default.createElement(_textbox.default, {
     placeholder: placeholder,
@@ -170,10 +179,10 @@ const Search = ({
     iconOnClick: handleIconClick,
     iconOnMouseDown: handleMouseDown,
     "aria-label": ariaLabel,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onChange: onChange,
-    onKeyDown: onKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
     inputRef: assignInput,
     tabIndex: tabIndex
   }), searchButton && /*#__PURE__*/_react.default.createElement(_search.StyledSearchButton, null, Boolean(isFocused || (!isControlled ? searchValue.length : value.length)) && /*#__PURE__*/_react.default.createElement(_button.default, _extends({

package/lib/components/simple-color-picker/simple-color/simple-color.style.js

@@ -10,8 +10,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledSimpleColor = _styledComponents.default.div`
-  width: 56px;
-  height: 56px;
+  width: var(--sizing700);
+  height: var(--sizing700);
   margin-right: 2px;
   margin-bottom: 2px;
 

package/lib/components/simple-color-picker/simple-color-input/simple-color-input.style.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
 var _input = require("../../../__internal__/input");
 
 var _colorSampleBox = _interopRequireDefault(require("../color-sample-box/color-sample-box.style"));
@@ -18,8 +16,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const StyledSimpleColorInput = (0, _styledComponents.default)(_input.Input)`
   position: absolute;
   opacity: 0;
-  height: 56px;
-  width: 56px;
+  height: var(--sizing700);
+  width: var(--sizing700);
   margin: 0;
 
   &:hover {
@@ -31,16 +29,10 @@ const StyledSimpleColorInput = (0, _styledComponents.default)(_input.Input)`
   }
 
   &:focus + ${_colorSampleBox.default} {
-    box-shadow: inset 0px 0px 0px 3px ${({
-  theme
-}) => theme.colors.white};
-    border: 2px solid ${({
-  theme
-}) => theme.colors.focus};
+    box-shadow: inset 0px 0px 0px var(--borderWidth200)
+      var(--colorsActionMajorYang100);
+    border: 2px solid var(--colorsSemanticFocus500);
   }
 `;
-StyledSimpleColorInput.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledSimpleColorInput;
 exports.default = _default;

package/lib/components/simple-color-picker/simple-color-picker.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -43,24 +41,20 @@ const StyledColorOptions = _styledComponents.default.div`
   border-top: ${BORDER_WIDTH}px solid transparent;
 
   ${({
-  theme,
   error,
   info,
   warning
 }) => {
   if (error) return (0, _styledComponents.css)`
-        outline: 2px solid ${theme.colors.error};
+        outline: var(--borderWidth200) solid var(--colorsSemanticNegative500);
       `;
   if (warning) return (0, _styledComponents.css)`
-        outline: 1px solid ${theme.colors.warning};
+        outline: var(--borderWidth200) solid var(--colorsSemanticCaution500);
       `;
   if (info) return (0, _styledComponents.css)`
-        outline: 1px solid ${theme.colors.info};
+        outline: var(--borderWidth200) solid var(--colorsSemanticInfo500);
       `;
   return "";
 }}
 `;
-exports.StyledColorOptions = StyledColorOptions;
-StyledColorOptions.defaultProps = {
-  theme: _base.default
-};
+exports.StyledColorOptions = StyledColorOptions;

package/lib/components/simple-color-picker/tick-icon/tick-icon.style.js

@@ -11,15 +11,13 @@ var _icon = _interopRequireDefault(require("../../icon"));
 
 var _getRgbValues = _interopRequireDefault(require("../../../style/utils/get-rgb-values"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const getIconColor = (color, theme) => {
+const getIconColor = color => {
   const rgbValues = (0, _getRgbValues.default)(color);
   const [r, g, b] = rgbValues; // color contrast calculating formula as per W3 suggestions
 
@@ -27,8 +25,8 @@ const getIconColor = (color, theme) => {
         greenMultiplier = 587,
         blueMultiplier = 114;
   const contrast = (Math.round(r * redMultiplier) + Math.round(g * greenMultiplier) + Math.round(b * blueMultiplier)) / 1000;
-  if (contrast < 128) return theme.colors.white;
-  return theme.text.color;
+  if (contrast < 128) return "var(--colorsActionMajorYang100)";
+  return "var(--colorsActionMajorYin090)";
 };
 
 const StyledTickIcon = (0, _styledComponents.default)(_icon.default)`
@@ -40,9 +38,8 @@ const StyledTickIcon = (0, _styledComponents.default)(_icon.default)`
   &::before {
     font-size: 22px;
     color: ${({
-  color,
-  theme
-}) => getIconColor(color, theme)};
+  color
+}) => getIconColor(color)};
   }
 
   ${({
@@ -53,8 +50,5 @@ const StyledTickIcon = (0, _styledComponents.default)(_icon.default)`
       }
     `}
 `;
-StyledTickIcon.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledTickIcon;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.25.0",
+  "version": "104.27.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {