carbon-react 111.22.0 → 111.22.2

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

@@ -19,7 +19,7 @@ var _advancedColorPickerCell = _interopRequireDefault(require("./advanced-color-
 
 var _simpleColorPicker = require("../simple-color-picker/simple-color-picker.style");
 
-var _simpleColor = _interopRequireDefault(require("../simple-color-picker/simple-color/simple-color.style"));
+var _simpleColor = require("../simple-color-picker/simple-color/simple-color.style");
 
 var _dialog = require("../dialog/dialog.style");
 
@@ -27,7 +27,7 @@ var _dialog2 = _interopRequireDefault(require("../dialog/dialog.component"));
 
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 
-var _checkerBoard = _interopRequireDefault(require("../simple-color-picker/color-sample-box/checker-board.svg"));
+var _checkerBoard = _interopRequireDefault(require("../simple-color-picker/simple-color/checker-board.svg"));
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
@@ -81,7 +81,7 @@ const DialogStyle = (0, _styledComponents.default)(_dialog2.default)`
 
   ${_simpleColorPicker.StyledColorOptions} {
     max-width: 285px;
-    ${_simpleColor.default} {
+    ${_simpleColor.StyledSimpleColor} {
       border: 1px solid var(--colorsUtilityYin090);
       margin-right: -1px;
       margin-bottom: -1px;

package/lib/components/button-bar/button-bar.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 export interface ButtonBarProps extends SpaceProps {
+    /** Button or IconButton Elements, to be rendered inside the component */
     children: React.ReactNode;
     /** Apply fullWidth style to the button bar */
     fullWidth?: boolean;
@@ -9,5 +10,8 @@ export interface ButtonBarProps extends SpaceProps {
     /** Assigns a size to the buttons: "small" | "medium" | "large" */
     size?: "small" | "medium" | "large";
 }
-declare const ButtonBar: ({ children, size, iconPosition, fullWidth, ...rest }: ButtonBarProps) => JSX.Element;
+export declare const ButtonBar: {
+    ({ children, size, iconPosition, fullWidth, ...rest }: ButtonBarProps): JSX.Element;
+    displayName: string;
+};
 export default ButtonBar;

package/lib/components/button-bar/button-bar.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ButtonBar = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -64,6 +64,7 @@ const ButtonBar = ({
   }), _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(child.type, getBtnProps(child))));
 };
 
+exports.ButtonBar = ButtonBar;
 ButtonBar.propTypes = {
   "children": _propTypes.default.node,
   "fullWidth": _propTypes.default.bool,
@@ -378,5 +379,6 @@ ButtonBar.propTypes = {
   }), _propTypes.default.string]),
   "size": _propTypes.default.oneOf(["large", "medium", "small"])
 };
+ButtonBar.displayName = "ButtonBar";
 var _default = ButtonBar;
 exports.default = _default;

package/lib/components/carousel/slide/slide.component.d.ts

@@ -1,7 +1,12 @@
 import React from "react";
 export interface SlideProps {
+    /** Content of the Slide */
     children?: React.ReactNode;
+    /** Accepts a callback function which is triggered on Slide click */
     onClick?: (ev: React.MouseEvent<HTMLDivElement>) => void;
 }
-declare const Slide: (props: SlideProps) => JSX.Element;
+export declare const Slide: {
+    (props: SlideProps): JSX.Element;
+    displayName: string;
+};
 export default Slide;

package/lib/components/carousel/slide/slide.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Slide = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,9 +19,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const Slide = props => /*#__PURE__*/_react.default.createElement(_slide.SlideStyle, _extends({}, props, (0, _tags.default)("slide", props)));
 
+exports.Slide = Slide;
 Slide.propTypes = {
   "children": _propTypes.default.node,
   "onClick": _propTypes.default.func
 };
+Slide.displayName = "Slide";
 var _default = Slide;
 exports.default = _default;

package/lib/components/duelling-picklist/duelling-picklist.component.js

@@ -81,6 +81,11 @@ const DuellingPicklist = ({
 };
 
 DuellingPicklist.propTypes = { ...marginPropTypes,
+
+  /**
+   * Content of the component, should contain two Picklist children
+   * and a PicklistDivider
+   */
   children: (props, propName) => {
     const prop = props[propName];
     let error;

package/lib/components/duelling-picklist/duelling-picklist.d.ts

@@ -2,6 +2,10 @@ import * as React from "react";
 import { MarginProps } from "styled-system";
 
 export interface DuellingPicklistProps extends MarginProps {
+  /**
+   * Content of the component, should contain two Picklist children
+   * and a PicklistDivider
+   */
   children?: React.ReactNode;
   /** Indicate if component is disabled */
   disabled?: boolean;

package/lib/components/fieldset/fieldset.component.d.ts

@@ -7,5 +7,8 @@ export interface FieldsetProps extends StyledFieldsetProps, MarginProps {
     /** The text for the fieldsets legend element. */
     legend?: string;
 }
-declare const Fieldset: ({ children, inline, legend, ...rest }: FieldsetProps) => JSX.Element;
+export declare const Fieldset: {
+    ({ children, inline, legend, ...rest }: FieldsetProps): JSX.Element;
+    displayName: string;
+};
 export default Fieldset;

package/lib/components/fieldset/fieldset.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Fieldset = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -49,6 +49,7 @@ const Fieldset = ({
   }, getLegend(), children)));
 };
 
+exports.Fieldset = Fieldset;
 Fieldset.propTypes = {
   "children": _propTypes.default.node,
   "inline": _propTypes.default.bool,
@@ -208,5 +209,6 @@ Fieldset.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string])
 };
+Fieldset.displayName = "Fieldset";
 var _default = Fieldset;
 exports.default = _default;

package/lib/components/flat-table/flat-table-cell/flat-table-cell.component.js

@@ -84,6 +84,8 @@ FlatTableCell.propTypes = {
 
   /** Content alignment */
   align: _propTypes.default.oneOf(["center", "left", "right"]),
+
+  /** Cell content */
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
 
   /** Number of columns that a cell should span */

package/lib/components/flat-table/flat-table-cell/flat-table-cell.d.ts

@@ -5,6 +5,7 @@ import { TableBorderSize } from "..";
 export interface FlatTableCellProps extends PaddingProps {
   /** Content alignment */
   align?: "left" | "center" | "right";
+  /** Cell content */
   children?: React.ReactNode | string;
   /** Number of columns that a cell should span */
   colspan?: number | string;

package/lib/components/flat-table/flat-table-header/flat-table-header.component.js

@@ -73,6 +73,8 @@ FlatTableHeader.propTypes = {
 
   /** Content alignment */
   align: _propTypes.default.oneOf(["center", "left", "right"]),
+
+  /** Header content */
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
 
   /** Number of columns that a header cell should span */

package/lib/components/flat-table/flat-table-header/flat-table-header.d.ts

@@ -8,6 +8,7 @@ export interface FlatTableHeaderProps extends PaddingProps {
   align?: "left" | "center" | "right";
   /** If true sets alternative background color */
   alternativeBgColor?: boolean;
+  /** Header content */
   children?: React.ReactNode | string;
   /** Number of columns that a header cell should span */
   colspan?: number | string;

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -79,6 +79,8 @@ FlatTableRowHeader.propTypes = {
 
   /** Content alignment */
   align: _propTypes.default.oneOf(["center", "left", "right"]),
+
+  /** RowHeader content */
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
 
   /** Column width, pass a number to set a fixed width in pixels */

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.d.ts

@@ -5,6 +5,7 @@ import { TableBorderSize } from "..";
 export interface FlatTableRowHeaderProps extends PaddingProps {
   /** Content alignment */
   align?: string;
+  /** RowHeader content */
   children?: React.ReactNode | string;
   /** Column width, pass a number to set a fixed width in pixels */
   width?: number;

package/lib/components/navigation-bar/navigation-bar.component.d.ts

@@ -4,7 +4,9 @@ export declare type Position = "sticky" | "fixed";
 export declare type Orientation = "top" | "bottom";
 export declare type NavigationType = "light" | "dark" | "white" | "black";
 export interface NavigationBarProps extends PaddingProps, FlexboxProps {
+    /** Content of the component */
     children?: React.ReactNode;
+    /** HTML aria-label attribute */
     ariaLabel?: string;
     /** Color scheme of navigation component */
     navigationType?: NavigationType;

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

@@ -1,2 +1,4 @@
-export { default as SimpleColorPicker } from "./simple-color-picker";
-export { default as SimpleColor } from "./simple-color/simple-color";
+export { default as SimpleColorPicker } from "./simple-color-picker.component";
+export type { SimpleColorPickerProps } from "./simple-color-picker.component";
+export { default as SimpleColor } from "./simple-color";
+export type { SimpleColorProps } from "./simple-color";

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

@@ -0,0 +1,2 @@
+export { default } from "./simple-color.component";
+export type { SimpleColorProps } from "./simple-color.component";

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

@@ -0,0 +1,25 @@
+import React from "react";
+export interface SimpleColorProps {
+    /** the value of the color that is represented by this SimpleColor */
+    value: string;
+    /** the input name */
+    name?: string;
+    /** the input id */
+    id?: string;
+    /** if true, input will be disabled */
+    disabled?: boolean;
+    /** 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;
+    /** determines if this color option is selected or unselected when component is used as uncontrolled */
+    defaultChecked?: boolean;
+    /** [Legacy] Custom classname */
+    className?: string;
+}
+export declare const SimpleColor: React.ForwardRefExoticComponent<SimpleColorProps & React.RefAttributes<HTMLInputElement>>;
+export default SimpleColor;

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

@@ -3,21 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.SimpleColor = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
 
-var _simpleColor = _interopRequireDefault(require("./simple-color.style"));
+var _simpleColor = require("./simple-color.style");
 
-var _colorSampleBox = _interopRequireDefault(require("../color-sample-box"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _simpleColorInput = _interopRequireDefault(require("../simple-color-input/simple-color-input.style"));
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
 
@@ -28,15 +30,18 @@ const SimpleColor = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     onMouseDown,
     value,
     name,
-    checked,
+    checked = false,
     className,
+    id,
+    defaultChecked,
     ...rest
   } = props;
-  return /*#__PURE__*/_react.default.createElement(_simpleColor.default, _extends({
-    color: value,
-    checked: checked,
+  const {
+    current: inputId
+  } = (0, _react.useRef)(id || (0, _guid.default)());
+  return /*#__PURE__*/_react.default.createElement(_simpleColor.StyledSimpleColor, _extends({
     className: className
-  }, (0, _tags.default)("simple-color", props)), /*#__PURE__*/_react.default.createElement(_simpleColorInput.default, _extends({
+  }, (0, _tags.default)("simple-color", props)), /*#__PURE__*/_react.default.createElement(_simpleColor.StyledSimpleColorInput, _extends({
     onChange: onChange,
     onBlur: onBlur,
     onMouseDown: onMouseDown,
@@ -46,38 +51,29 @@ const SimpleColor = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     role: "radio",
     value: value,
     "aria-checked": checked,
-    ref: ref
-  }, rest)), /*#__PURE__*/_react.default.createElement(_colorSampleBox.default, {
+    ref: ref,
+    id: inputId,
+    defaultChecked: defaultChecked
+  }, rest)), /*#__PURE__*/_react.default.createElement(_simpleColor.StyledColorSampleBox, {
+    color: value
+  }, checked && /*#__PURE__*/_react.default.createElement(_simpleColor.StyledTickIcon, {
     color: value,
-    checked: checked
-  }));
+    type: "tick"
+  })));
 });
 
-SimpleColor.defaultProps = {
-  checked: false,
-  onChange: null
-};
+exports.SimpleColor = SimpleColor;
 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
+  "checked": _propTypes.default.bool,
+  "className": _propTypes.default.string,
+  "defaultChecked": _propTypes.default.bool,
+  "disabled": _propTypes.default.bool,
+  "id": _propTypes.default.string,
+  "name": _propTypes.default.string,
+  "onBlur": _propTypes.default.func,
+  "onChange": _propTypes.default.func,
+  "onMouseDown": _propTypes.default.func,
+  "value": _propTypes.default.string.isRequired
 };
 SimpleColor.displayName = "SimpleColor";
 var _default = SimpleColor;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledSimpleColor: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledColorSampleBox: import("styled-components").StyledComponent<"div", any, {
+    color: string;
+}, never>;
+export declare const StyledSimpleColorInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../__internal__/input").InputProps & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
+export declare const StyledTickIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    color: string;
+}, never>;

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

@@ -3,12 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StyledTickIcon = exports.StyledSimpleColorInput = exports.StyledColorSampleBox = exports.StyledSimpleColor = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _input = require("../../../__internal__/input");
+
+var _checkerBoard = _interopRequireDefault(require("./checker-board.svg"));
+
+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 StyledSimpleColor = _styledComponents.default.div`
   width: var(--sizing700);
   height: var(--sizing700);
@@ -19,5 +31,78 @@ const StyledSimpleColor = _styledComponents.default.div`
     cursor: pointer;
   }
 `;
-var _default = StyledSimpleColor;
-exports.default = _default;
+exports.StyledSimpleColor = StyledSimpleColor;
+const StyledColorSampleBox = _styledComponents.default.div`
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid transparent;
+
+  ${({
+  color
+}) => color !== "transparent" && (0, _styledComponents.css)`
+      background-color: ${color};
+    `}
+
+  ${({
+  color
+}) => color === "transparent" && (0, _styledComponents.css)`
+      background-color: #eeeeee;
+      background-image: url(${_checkerBoard.default});
+      background-size: 14px 14px;
+      background-position: -2px -2px;
+    `}
+`;
+exports.StyledColorSampleBox = StyledColorSampleBox;
+const StyledSimpleColorInput = (0, _styledComponents.default)(_input.Input)`
+  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);
+  }
+`;
+exports.StyledSimpleColorInput = StyledSimpleColorInput;
+
+const getIconColor = color => {
+  const rgbValues = (0, _getRgbValues.default)(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 = (0, _styledComponents.default)(_icon.default)`
+  height: 22px;
+  width: 22px;
+  pointer-events: none;
+  display: block;
+
+  &::before {
+    font-size: 22px;
+    color: ${({
+  color
+}) => getIconColor(color)};
+  }
+`;
+exports.StyledTickIcon = StyledTickIcon;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+export interface SimpleColorPickerProps extends ValidationProps, MarginProps {
+    /** The SimpleColor components to be rendered in the group */
+    children?: React.ReactNode;
+    /** prop that represents childWidth */
+    childWidth?: string | number;
+    /** 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 | number;
+    /** 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;
+}
+export declare const SimpleColorPicker: (props: SimpleColorPickerProps) => JSX.Element;
+export default SimpleColorPicker;