carbon-react 111.12.3 → 111.12.4

package/lib/components/simple-color-picker/color-sample-box/color-sample-box.component.js

@@ -4,11 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.colorSampleBoxCheck = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _colorSampleBox = _interopRequireDefault(require("./color-sample-box.style"));
+
 var _tickIcon = _interopRequireDefault(require("../tick-icon/tick-icon.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const ColorSampleBox = ({
   color,
   checked
@@ -21,14 +27,18 @@ const ColorSampleBox = ({
     type: "tick"
   }));
 };
+
 const colorSampleBoxCheck = (props, propName, component) => {
   const color = props[propName],
-    hexRegex = /\b[0-9A-Fa-f]{6}\b/g;
+        hexRegex = /\b[0-9A-Fa-f]{6}\b/g;
+
   if (!color.match(hexRegex) && color !== "transparent") {
     return new Error(`Provide color in a six-digit hex format or 'transparent' in ${component}.`);
   }
+
   return null;
 };
+
 exports.colorSampleBoxCheck = colorSampleBoxCheck;
 ColorSampleBox.propTypes = {
   checked: _propTypes.default.bool,

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

@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _checkerBoard = _interopRequireDefault(require("./checker-board.svg"));
+
 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 StyledColorSampleBox = _styledComponents.default.div`
   height: 100%;
   width: 100%;

package/lib/components/simple-color-picker/color-sample-box/index.js

@@ -9,5 +9,7 @@ Object.defineProperty(exports, "default", {
     return _colorSampleBox.default;
   }
 });
+
 var _colorSampleBox = _interopRequireDefault(require("./color-sample-box.component"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -15,6 +15,9 @@ Object.defineProperty(exports, "SimpleColor", {
     return _simpleColor.default;
   }
 });
+
 var _simpleColorPicker = _interopRequireDefault(require("./simple-color-picker.component"));
+
 var _simpleColor = _interopRequireDefault(require("./simple-color"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -9,5 +9,7 @@ Object.defineProperty(exports, "default", {
     return _simpleColor.default;
   }
 });
+
 var _simpleColor = _interopRequireDefault(require("./simple-color.component"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -4,14 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireDefault(require("react"));
+
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
+
 var _simpleColor = _interopRequireDefault(require("./simple-color.style"));
+
 var _colorSampleBox = _interopRequireDefault(require("../color-sample-box"));
+
 var _simpleColorInput = _interopRequireDefault(require("../simple-color-input/simple-color-input.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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); }
+
 const SimpleColor = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     onChange,
@@ -43,6 +52,7 @@ const SimpleColor = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     checked: checked
   }));
 });
+
 SimpleColor.defaultProps = {
   checked: false,
   onChange: null
@@ -50,16 +60,22 @@ SimpleColor.defaultProps = {
 SimpleColor.propTypes = {
   /** the value of the color that is represented by this SimpleColor */
   value: _propTypes.default.string,
+
   /** the input name */
   name: _propTypes.default.string,
+
   /** called when the user selects or deselects this color option */
   onChange: _propTypes.default.func,
+
   /** A callback triggered when a color is selected. */
   onBlur: _propTypes.default.func,
+
   /** A callback triggered when a color is selected. */
   onMouseDown: _propTypes.default.func,
+
   /** determines if this color option is selected or unselected */
   checked: _propTypes.default.bool,
+
   /** [Legacy] Custom classname */
   className: _propTypes.default.string
 };

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

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const StyledSimpleColor = _styledComponents.default.div`
   width: var(--sizing700);
   height: var(--sizing700);

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

@@ -4,10 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _input = require("../../../__internal__/input");
+
 var _colorSampleBox = _interopRequireDefault(require("../color-sample-box/color-sample-box.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const StyledSimpleColorInput = (0, _styledComponents.default)(_input.Input)`
   position: absolute;
   opacity: 0;

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

@@ -4,23 +4,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
+
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
+
 var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
+
 var _simpleColor = _interopRequireDefault(require("./simple-color"));
+
 var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper/radio-button-mapper.component"));
+
 var _simpleColorPicker = require("./simple-color-picker.style");
+
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.component"));
+
 var _inputBehaviour = require("../../__internal__/input-behaviour");
+
 var _utils = require("../../style/utils");
+
 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; }
+
 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); }
+
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
+
 const SimpleColorPicker = props => {
   const {
     children,
@@ -53,24 +71,31 @@ const SimpleColorPicker = props => {
   const navigationGrid = filteredChildren.map((child, index) => {
     const allowUp = currentRow !== 1;
     let allowDown = false;
+
     if (currentRow + 1 === rowCount && blankSlots - itemsPerRow < 0) {
       allowDown = true;
       blankSlots += 1;
     } else if (currentRow + 1 !== rowCount && currentRow !== rowCount && rowCount > 1) {
       allowDown = true;
     }
+
     if (loopCounter === itemsPerRow) {
       loopCounter = 0;
       currentRow += 1;
     }
+
     let upItem;
+
     if (allowUp) {
       upItem = index - itemsPerRow;
     }
+
     let downItem;
+
     if (allowDown) {
       downItem = itemsPerRow + index;
     }
+
     const childProps = {
       ref: gridItemRefs[index],
       "data-up": allowUp,
@@ -86,10 +111,12 @@ const SimpleColorPicker = props => {
     if (onKeyDown) {
       onKeyDown(e);
     }
+
     const arrowKeys = [_events.default.isLeftKey(e), _events.default.isUpKey(e), _events.default.isRightKey(e), _events.default.isDownKey(e)];
     if (!arrowKeys.includes(true)) return;
     e.preventDefault();
     let itemIndex;
+
     if (_events.default.isUpKey(e)) {
       if (e.target.getAttribute("data-up") !== "true") return;
       itemIndex = e.target.getAttribute("data-item-up");
@@ -97,30 +124,36 @@ const SimpleColorPicker = props => {
       if (e.target.getAttribute("data-down") !== "true") return;
       itemIndex = e.target.getAttribute("data-item-down");
     }
+
     if (_events.default.isLeftKey(e) || _events.default.isRightKey(e)) {
       const position = element => {
         return e.target.getAttribute("value") === element.props.value;
       };
+
       if (_events.default.isLeftKey(e)) {
         itemIndex = navigationGrid.findIndex(position) - 1;
       } else {
         itemIndex = navigationGrid.findIndex(position) + 1;
       }
+
       if (itemIndex < 0) {
         itemIndex = navigationGrid.length - 1;
       } else if (itemIndex > navigationGrid.length - 1) {
         itemIndex = 0;
       }
     }
+
     const item = navigationGrid[itemIndex].ref.current;
     item.focus();
     item.click();
   }, [onKeyDown, navigationGrid]);
+
   const handleClickOutside = ev => {
     if (myRef.current && ev.target && !myRef.current.contains(ev.target)) {
       setIsBlurBlocked(false);
     }
   };
+
   (0, _react.useEffect)(() => {
     document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", handleClickOutside);
@@ -129,31 +162,30 @@ const SimpleColorPicker = props => {
       document.removeEventListener("keydown", handleClickOutside);
     };
   });
+
   const handleOnBlur = ev => {
     ev.preventDefault();
+
     if (!blurBlocked && onBlur) {
       onBlur(ev);
     }
   };
+
   const handleOnMouseDown = ev => {
-    setIsBlurBlocked(true);
+    setIsBlurBlocked(true); // If the mousedown event occurred on the currently-focused <SimpleColor>
 
-    // If the mousedown event occurred on the currently-focused <SimpleColor>
     if (focusedElement !== null && focusedElement === ev.target) {
-      ev.preventDefault();
-
-      // If a different <SimpleColor> is currently focused
+      ev.preventDefault(); // If a different <SimpleColor> is currently focused
     } else if (focusedElement !== null) {
       ev.preventDefault();
       setIsBlurBlocked(false);
-      setFocusedElement(ev.target);
-
-      // If no <SimpleColor> is currently focused
+      setFocusedElement(ev.target); // If no <SimpleColor> is currently focused
     } else {
       setIsBlurBlocked(true);
       setFocusedElement(ev.target);
     }
   };
+
   const validationProps = {
     error,
     warning,
@@ -186,55 +218,74 @@ const SimpleColorPicker = props => {
     tooltipFlipOverrides: ["top", "bottom"]
   }))));
 };
+
 SimpleColorPicker.propTypes = {
   /** Filtered styled system margin props */
   ...marginPropTypes,
+
   /** The SimpleColor components to be rendered in the group */
   children: (props, propName, componentName) => {
     let error;
     const prop = props[propName];
+
     _react.default.Children.forEach(prop, child => {
       if (child === null) {
         return;
       }
+
       if (_simpleColor.default.displayName !== child.type.displayName) {
         error = new Error(`\`${componentName}\` only accepts children of type \`${_simpleColor.default.displayName}\`.`);
       }
     });
+
     return error;
   },
+
   /** Should the onBlur callback prop be initially blocked? */
   isBlurBlocked: _propTypes.default.bool,
+
   /** Indicate that error has occurred
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */
   error: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+
   /** Indicate that warning has occurred
   Pass string to display icon, tooltip and orange border
   Pass true boolean to only display orange border */
   warning: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+
   /** Indicate additional information
   Pass string to display icon, tooltip and blue border
   Pass true boolean to only display blue border */
   info: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+
   /** When true, validation icon will be placed on legend instead of being placed by the input */
   validationOnLegend: _propTypes.default.bool,
+
   /** The content for the RadioGroup Legend */
   legend: _propTypes.default.string.isRequired,
+
   /** The currently selected color. */
   value: _propTypes.default.string,
+
   /** The name to apply to the input. */
   name: _propTypes.default.string,
+
   /** A callback triggered when a color is selected. */
   onChange: _propTypes.default.func,
+
   /** A callback triggered when a color is selected. */
   onBlur: _propTypes.default.func,
+
   /** A callback triggered on key down. */
   onKeyDown: _propTypes.default.func,
+
   /** prop that sets max-width in css */
   maxWidth: _propTypes.default.string,
+
   /** prop that represents childWidth */
   childWidth: _propTypes.default.string,
+
   /** Flag to configure component as mandatory */
   required: _propTypes.default.bool
 };

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

@@ -4,13 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledColorOptions = exports.StyledContent = void 0;
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.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; }
+
 const BORDER_WIDTH = 2;
+
 const getRoundedMaxWidth = (maxWidth, childWidth) => Math.floor(maxWidth / childWidth) * childWidth;
+
 const StyledContent = _styledComponents.default.div`
   display: flex;
   align-items: center;

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

@@ -4,23 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _icon = _interopRequireDefault(require("../../icon"));
+
 var _getRgbValues = _interopRequireDefault(require("../../../style/utils/get-rgb-values"));
+
 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 => {
   const rgbValues = (0, _getRgbValues.default)(color);
-  const [r, g, b] = rgbValues;
-  // color contrast calculating formula as per W3 suggestions
+  const [r, g, b] = rgbValues; // color contrast calculating formula as per W3 suggestions
+
   const redMultiplier = 299,
-    greenMultiplier = 587,
-    blueMultiplier = 114;
+        greenMultiplier = 587,
+        blueMultiplier = 114;
   const contrast = (Math.round(r * redMultiplier) + Math.round(g * greenMultiplier) + Math.round(b * blueMultiplier)) / 1000;
   if (contrast < 128) return "var(--colorsUtilityYang100)";
   return "var(--colorsUtilityYin090)";
 };
+
 const StyledTickIcon = (0, _styledComponents.default)(_icon.default)`
   height: 22px;
   width: 22px;

package/lib/components/split-button/index.js

@@ -9,5 +9,7 @@ Object.defineProperty(exports, "default", {
     return _splitButton.default;
   }
 });
+
 var _splitButton = _interopRequireDefault(require("./split-button.component"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/split-button/split-button-children.style.js

@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _base = _interopRequireDefault(require("../../style/themes/base"));
+
 var _button = _interopRequireDefault(require("../button/button.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; }
+
 const StyledSplitButtonChildrenContainer = _styledComponents.default.div`
   ${({
   theme,

package/lib/components/split-button/split-button-toggle.style.js

@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _button = _interopRequireDefault(require("../button/button.style"));
+
 var _icon = _interopRequireDefault(require("../icon/icon.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; }
+
 const horizontalPaddingSizes = {
   small: 5,
   medium: 10,