carbon-react 111.22.1 → 111.22.2

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.SimpleColorPicker = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+var _invariant = _interopRequireDefault(require("invariant"));
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
@@ -37,8 +37,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return 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 marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
-
 const SimpleColorPicker = props => {
   const {
     children,
@@ -58,11 +56,23 @@ const SimpleColorPicker = props => {
     required,
     ...rest
   } = props;
-  const filteredChildren = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
-  const myRef = (0, _react.useRef)(null);
+  const hasProperChildren = (0, _react.useMemo)(() => {
+    let hasSimpleColorChildren = true;
+
+    _react.default.Children.toArray(children).forEach(child => {
+      if (typeof child === "string" || /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName !== "SimpleColor") {
+        hasSimpleColorChildren = false;
+      }
+    });
+
+    return hasSimpleColorChildren;
+  }, [children]);
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `SimpleColorPicker accepts only children of type \`${_simpleColor.default.displayName}\`.`) : (0, _invariant.default)(false) : void 0;
+  const filteredChildren = (0, _react.useMemo)(() => _react.default.Children.toArray(children).filter(child => /*#__PURE__*/_react.default.isValidElement(child)), [children]);
+  const internalRef = (0, _react.useRef)(null);
   const [blurBlocked, setIsBlurBlocked] = (0, _react.useState)(isBlurBlocked);
   const [focusedElement, setFocusedElement] = (0, _react.useState)(null);
-  const itemsPerRow = Math.floor(maxWidth / childWidth);
+  const itemsPerRow = Math.floor(+maxWidth / +childWidth);
   const rowCount = Math.ceil((filteredChildren === null || filteredChildren === void 0 ? void 0 : filteredChildren.length) / itemsPerRow);
   let blankSlots = itemsPerRow * rowCount - (filteredChildren === null || filteredChildren === void 0 ? void 0 : filteredChildren.length);
   let currentRow = 1;
@@ -115,19 +125,20 @@ const SimpleColorPicker = props => {
     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;
+    let itemIndex = null;
+    const target = e.target;
 
     if (_events.default.isUpKey(e)) {
-      if (e.target.getAttribute("data-up") !== "true") return;
-      itemIndex = e.target.getAttribute("data-item-up");
+      if (target.getAttribute("data-up") !== "true") return;
+      itemIndex = +target.getAttribute("data-item-up");
     } else if (_events.default.isDownKey(e)) {
-      if (e.target.getAttribute("data-down") !== "true") return;
-      itemIndex = e.target.getAttribute("data-item-down");
+      if (target.getAttribute("data-down") !== "true") return;
+      itemIndex = +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;
+        return target.getAttribute("value") === element.props.value;
       };
 
       if (_events.default.isLeftKey(e)) {
@@ -142,14 +153,18 @@ const SimpleColorPicker = props => {
         itemIndex = 0;
       }
     }
+    /* istanbul ignore else */
+
 
-    const item = navigationGrid[itemIndex].ref.current;
-    item.focus();
-    item.click();
-  }, [onKeyDown, navigationGrid]);
+    if (itemIndex !== null) {
+      const item = gridItemRefs[itemIndex].current;
+      item === null || item === void 0 ? void 0 : item.focus();
+      item === null || item === void 0 ? void 0 : item.click();
+    }
+  }, [onKeyDown, navigationGrid, gridItemRefs]);
 
   const handleClickOutside = ev => {
-    if (myRef.current && ev.target && !myRef.current.contains(ev.target)) {
+    if (internalRef.current && ev.target && !internalRef.current.contains(ev.target)) {
       setIsBlurBlocked(false);
     }
   };
@@ -201,10 +216,7 @@ const SimpleColorPicker = props => {
   }) => /*#__PURE__*/_react.default.createElement(_simpleColorPicker.StyledColorOptions, _extends({
     maxWidth: maxWidth,
     childWidth: childWidth,
-    error: error,
-    warning: warning,
-    info: info,
-    ref: myRef,
+    ref: internalRef,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
   }, validationProps), /*#__PURE__*/_react.default.createElement(_radioButtonMapper.default, {
@@ -219,75 +231,177 @@ const SimpleColorPicker = props => {
   }))));
 };
 
+exports.SimpleColorPicker = SimpleColorPicker;
 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
+  "children": _propTypes.default.node,
+  "childWidth": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "isBlurBlocked": _propTypes.default.bool,
+  "legend": _propTypes.default.string.isRequired,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "maxWidth": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "name": _propTypes.default.string.isRequired,
+  "onBlur": _propTypes.default.func,
+  "onChange": _propTypes.default.func,
+  "onKeyDown": _propTypes.default.func,
+  "required": _propTypes.default.bool,
+  "validationOnLegend": _propTypes.default.bool,
+  "value": _propTypes.default.string,
+  "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 };
 var _default = SimpleColorPicker;
 exports.default = _default;

package/lib/components/simple-color-picker/simple-color-picker.style.d.ts

@@ -0,0 +1,9 @@
+import { ValidationProps } from "../../__internal__/validations";
+declare type Width = string | number;
+declare const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledColorOptionsProps extends ValidationProps {
+    maxWidth: Width;
+    childWidth: Width;
+}
+declare const StyledColorOptions: import("styled-components").StyledComponent<"div", any, StyledColorOptionsProps, never>;
+export { StyledContent, StyledColorOptions };

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

@@ -17,7 +17,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const BORDER_WIDTH = 2;
 
-const getRoundedMaxWidth = (maxWidth, childWidth) => Math.floor(maxWidth / childWidth) * childWidth;
+const getRoundedMaxWidth = (maxWidth, childWidth) => Math.floor(+maxWidth / +childWidth) * +childWidth;
 
 const StyledContent = _styledComponents.default.div`
   display: flex;

package/lib/components/vertical-divider/vertical-divider.component.d.ts

@@ -2,11 +2,20 @@
 import { SpaceProps } from "styled-system";
 declare type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
 export interface VerticalDividerProps extends SpaceProps {
+    /** Shorthand for the height attribute */
     h?: number | string;
+    /** Height attribute of the component */
     height?: number | string;
+    /**
+     * Sets the display: inline css attribute on the component
+     * To be used in non-flex containers.
+     */
     displayInline?: boolean;
-    /** the supported rage is 1-100  */
+    /** Custom tint of the divider, the supported rage is 1-100 */
     tint?: TintRange;
 }
-declare const VerticalDivider: ({ h, height, displayInline, tint, ...props }: VerticalDividerProps) => JSX.Element;
+export declare const VerticalDivider: {
+    ({ h, height, displayInline, tint, ...props }: VerticalDividerProps): JSX.Element;
+    displayName: string;
+};
 export default VerticalDivider;

package/lib/components/vertical-divider/vertical-divider.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.VerticalDivider = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -44,6 +44,7 @@ const VerticalDivider = ({
   }));
 };
 
+exports.VerticalDivider = VerticalDivider;
 VerticalDivider.propTypes = {
   "displayInline": _propTypes.default.bool,
   "h": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -358,5 +359,6 @@ VerticalDivider.propTypes = {
   }), _propTypes.default.string]),
   "tint": _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100])
 };
+VerticalDivider.displayName = "VerticalDivider";
 var _default = VerticalDivider;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "111.22.1",
+  "version": "111.22.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -100,7 +100,7 @@
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "axe-core": "^3.5.5",
+    "axe-core": "^4.6.1",
     "babel-eslint": "10.0.3",
     "babel-jest": "^26.6.3",
     "babel-plugin-dev-expression": "^0.2.3",

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

@@ -1,33 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import StyledColorSampleBox from "./color-sample-box.style";
-import StyledTickIcon from "../tick-icon/tick-icon.style";
-
-const ColorSampleBox = ({
-  color,
-  checked
-}) => {
-  return /*#__PURE__*/React.createElement(StyledColorSampleBox, {
-    color: color
-  }, checked && /*#__PURE__*/React.createElement(StyledTickIcon, {
-    color: color,
-    checked: true,
-    type: "tick"
-  }));
-};
-
-export const colorSampleBoxCheck = (props, propName, component) => {
-  const color = props[propName],
-        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;
-};
-ColorSampleBox.propTypes = {
-  checked: PropTypes.bool,
-  color: colorSampleBoxCheck
-};
-export default ColorSampleBox;

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

@@ -1,31 +0,0 @@
-import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
-import checkerBoardSvg from "./checker-board.svg";
-const StyledColorSampleBox = styled.div`
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid transparent;
-
-  ${({
-  color
-}) => color !== "transparent" && css`
-      background-color: ${color};
-    `}
-
-  ${({
-  color
-}) => color === "transparent" && css`
-      background-color: #eeeeee;
-      background-image: url(${checkerBoardSvg});
-      background-size: 14px 14px;
-      background-position: -2px -2px;
-    `}
-`;
-StyledColorSampleBox.propTypes = {
-  color: PropTypes.string
-};
-export default StyledColorSampleBox;

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

@@ -1 +0,0 @@
-export { default } from "./color-sample-box.component";

package/esm/components/simple-color-picker/simple-color/simple-color.d.ts

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-export interface SimpleColorProps {
-  /** the value of the color that is represented by this SimpleColor */
-  value?: string;
-  /** the input name */
-  name?: string;
-  /** called when the user selects or deselects this color option */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Prop for `onBlur` events */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Prop for `onMouseDown` events */
-  onMouseDown?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-  /** determines if this color option is selected or unselected */
-  checked?: boolean;
-  /** [Legacy] Custom classname */
-  className?: string;
-}
-
-declare function SimpleColor(
-  props: SimpleColorProps & React.RefAttributes<HTMLInputElement>
-): JSX.Element;
-
-export default SimpleColor;

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

@@ -1,25 +0,0 @@
-import styled from "styled-components";
-import { Input as SimpleColorInput } from "../../../__internal__/input";
-import StyledColorSampleBox from "../color-sample-box/color-sample-box.style";
-const StyledSimpleColorInput = styled(SimpleColorInput)`
-  position: absolute;
-  opacity: 0;
-  height: var(--sizing700);
-  width: var(--sizing700);
-  margin: 0;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &:disabled:hover {
-    cursor: not-allowed;
-  }
-
-  &:focus + ${StyledColorSampleBox} {
-    box-shadow: inset 0px 0px 0px var(--borderWidth200)
-      var(--colorsUtilityYang100);
-    border: 2px solid var(--colorsSemanticFocus500);
-  }
-`;
-export default StyledSimpleColorInput;

package/esm/components/simple-color-picker/simple-color-picker.d.ts

@@ -1,41 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-import { ValidationProps } from "../../__internal__/validations";
-import { SimpleColorProps } from "./simple-color/simple-color";
-
-type SimpleColorPickerChild =
-  | React.ReactElement<SimpleColorProps>
-  | boolean
-  | null
-  | undefined;
-
-export interface SimpleColorPickerProps extends ValidationProps, MarginProps {
-  /** The SimpleColor components to be rendered in the group */
-  children?: SimpleColorPickerChild | SimpleColorPickerChild[];
-  /** prop that represents childWidth */
-  childWidth?: string;
-  /** Should the onBlur callback prop be initially blocked? */
-  isBlurBlocked?: boolean;
-  /** The content for the Legend */
-  legend: string;
-  /** prop that sets max-width in css */
-  maxWidth?: string;
-  /** The name to apply to the input. */
-  name?: string;
-  /** Prop for `onChange` events */
-  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Prop for `onKeyDown` events */
-  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
-  /** Prop for `onBlur` events */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Flag to configure component as mandatory */
-  required?: boolean;
-  /** When true, validation icon will be placed on legend instead of being placed by the input */
-  validationOnLegend?: boolean;
-  /** The currently selected color. */
-  value?: string;
-}
-
-declare function SimpleColorPicker(props: SimpleColorPickerProps): JSX.Element;
-
-export default SimpleColorPicker;

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

@@ -1,38 +0,0 @@
-import styled, { css } from "styled-components";
-import Icon from "../../icon";
-import getRgbValues from "../../../style/utils/get-rgb-values";
-
-const getIconColor = color => {
-  const rgbValues = getRgbValues(color);
-  const [r, g, b] = rgbValues; // color contrast calculating formula as per W3 suggestions
-
-  const redMultiplier = 299,
-        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 = styled(Icon)`
-  height: 22px;
-  width: 22px;
-  pointer-events: none;
-  display: none;
-
-  &::before {
-    font-size: 22px;
-    color: ${({
-  color
-}) => getIconColor(color)};
-  }
-
-  ${({
-  checked
-}) => checked && css`
-       {
-        display: block;
-      }
-    `}
-`;
-export default StyledTickIcon;