carbon-react 111.22.1 → 111.22.2

package/esm/__internal__/fieldset/fieldset.component.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface FieldsetProps extends MarginProps {
+    /** Role */
+    role?: string;
     /** Fieldset content */
     children: React.ReactNode;
     /** The content for the Fieldset Legend */

package/esm/__internal__/fieldset/fieldset.component.js

@@ -208,6 +208,7 @@ Fieldset.propTypes = {
     "toString": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "role": PropTypes.string,
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 export default Fieldset;

package/esm/components/accordion/accordion-group/accordion-group.component.d.ts

@@ -4,7 +4,11 @@ declare type AccordionGroupChild = React.ReactElement | boolean | null | undefin
 interface AccordionGroupChildArray extends Array<AccordionGroupChild> {
 }
 export interface AccordionGroupProps extends MarginProps {
+    /** An Accordion or list of Accordion components to be rendered inside the AccordionGroup */
     children?: AccordionGroupChild;
 }
-export declare const AccordionGroup: ({ children, ...rest }: AccordionGroupProps) => JSX.Element;
+export declare const AccordionGroup: {
+    ({ children, ...rest }: AccordionGroupProps): JSX.Element;
+    displayName: string;
+};
 export default AccordionGroup;

package/esm/components/accordion/accordion-group/accordion-group.component.js

@@ -261,4 +261,5 @@ AccordionGroup.propTypes = {
   }), PropTypes.string])
 };
 export { AccordionGroup };
+AccordionGroup.displayName = "AccordionGroup";
 export default AccordionGroup;

package/esm/components/accordion/accordion.component.d.ts

@@ -4,6 +4,7 @@ import { StyledAccordionContainerProps } from "./accordion.style";
 export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps {
     /** Width of the buttonHeading when it's set, defaults to 150px */
     buttonWidth?: number;
+    /** Content of the Accordion component */
     children?: React.ReactNode;
     /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */
     defaultExpanded?: boolean;

package/esm/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ButtonTypes } from "../../button/button.component";
+import { ButtonIconPosition, ButtonTypes, SizeOptions } from "../../button/button.component";
 import { IconType } from "../../icon";
 export declare type ActionPopoverMenuButtonAria = {
     "aria-haspopup": string;
@@ -8,14 +8,25 @@ export declare type ActionPopoverMenuButtonAria = {
     "aria-expanded": string;
 };
 export interface ActionPopoverMenuButtonProps {
-    children?: string;
+    /** ARIA attributes to be applied to the button HTML element */
+    ariaAttributes: ActionPopoverMenuButtonAria;
+    /** Variant of the menu button */
     buttonType?: ButtonTypes;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-element": string;
+    /** Content of the button */
+    children?: string;
+    /** Defines an Icon position related to the children: "before" | "after" */
+    iconPosition?: ButtonIconPosition;
+    /** Defines an Icon type within the button */
     iconType?: IconType;
-    iconPosition?: "after" | "before";
-    size?: "small" | "medium" | "large";
+    /** Assigns a size to the button: "small" | "medium" | "large" */
+    size?: SizeOptions;
+    /** Overrides the default tabindex of the component */
     tabIndex: number;
-    ariaAttributes: ActionPopoverMenuButtonAria;
-    "data-element": string;
 }
-declare const ActionPopoverMenuButton: ({ buttonType, iconType, iconPosition, size, children, ...props }: ActionPopoverMenuButtonProps) => JSX.Element;
+export declare const ActionPopoverMenuButton: {
+    ({ buttonType, iconType, iconPosition, size, children, ...props }: ActionPopoverMenuButtonProps): JSX.Element;
+    displayName: string;
+};
 export default ActionPopoverMenuButton;

package/esm/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.js

@@ -34,4 +34,6 @@ ActionPopoverMenuButton.propTypes = {
   "size": PropTypes.oneOf(["large", "medium", "small"]),
   "tabIndex": PropTypes.number.isRequired
 };
+export { ActionPopoverMenuButton };
+ActionPopoverMenuButton.displayName = "ActionPopoverMenuButton";
 export default ActionPopoverMenuButton;

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

@@ -2,11 +2,11 @@ import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
 import { StyledColorOptions } from "../simple-color-picker/simple-color-picker.style";
-import StyledSimpleColor from "../simple-color-picker/simple-color/simple-color.style";
+import { StyledSimpleColor } from "../simple-color-picker/simple-color/simple-color.style";
 import { StyledDialogContent, StyledDialogInnerContent } from "../dialog/dialog.style";
 import Dialog from "../dialog/dialog.component";
 import StyledIconButton from "../icon-button/icon-button.style";
-import checkerBoardSvg from "../simple-color-picker/color-sample-box/checker-board.svg";
+import checkerBoardSvg from "../simple-color-picker/simple-color/checker-board.svg";
 import baseTheme from "../../style/themes/base";
 const StyledAdvancedColorPickerWrapper = styled.div`
   ${margin}

package/esm/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/esm/components/button-bar/button-bar.component.js

@@ -359,4 +359,6 @@ ButtonBar.propTypes = {
   }), PropTypes.string]),
   "size": PropTypes.oneOf(["large", "medium", "small"])
 };
+export { ButtonBar };
+ButtonBar.displayName = "ButtonBar";
 export default ButtonBar;

package/esm/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/esm/components/carousel/slide/slide.component.js

@@ -12,4 +12,6 @@ Slide.propTypes = {
   "children": PropTypes.node,
   "onClick": PropTypes.func
 };
+export { Slide };
+Slide.displayName = "Slide";
 export default Slide;

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

@@ -60,6 +60,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/esm/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/esm/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/esm/components/fieldset/fieldset.component.js

@@ -194,4 +194,6 @@ Fieldset.propTypes = {
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string])
 };
+export { Fieldset };
+Fieldset.displayName = "Fieldset";
 export default Fieldset;

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

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

package/esm/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/esm/components/flat-table/flat-table-header/flat-table-header.component.js

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

package/esm/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/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

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

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/simple-color-picker/simple-color/simple-color.component.js

@@ -1,11 +1,10 @@
 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); }
 
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
-import React from "react";
+import guid from "../../../__internal__/utils/helpers/guid";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
-import StyledSimpleColor from "./simple-color.style";
-import ColorSampleBox from "../color-sample-box";
-import StyledSimpleColorInput from "../simple-color-input/simple-color-input.style";
+import { StyledSimpleColor, StyledColorSampleBox, StyledTickIcon, StyledSimpleColorInput } from "./simple-color.style";
 const SimpleColor = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     onChange,
@@ -13,13 +12,16 @@ const SimpleColor = /*#__PURE__*/React.forwardRef((props, ref) => {
     onMouseDown,
     value,
     name,
-    checked,
+    checked = false,
     className,
+    id,
+    defaultChecked,
     ...rest
   } = props;
+  const {
+    current: inputId
+  } = useRef(id || guid());
   return /*#__PURE__*/React.createElement(StyledSimpleColor, _extends({
-    color: value,
-    checked: checked,
     className: className
   }, tagComponent("simple-color", props)), /*#__PURE__*/React.createElement(StyledSimpleColorInput, _extends({
     onChange: onChange,
@@ -31,37 +33,28 @@ const SimpleColor = /*#__PURE__*/React.forwardRef((props, ref) => {
     role: "radio",
     value: value,
     "aria-checked": checked,
-    ref: ref
-  }, rest)), /*#__PURE__*/React.createElement(ColorSampleBox, {
+    ref: ref,
+    id: inputId,
+    defaultChecked: defaultChecked
+  }, rest)), /*#__PURE__*/React.createElement(StyledColorSampleBox, {
+    color: value
+  }, checked && /*#__PURE__*/React.createElement(StyledTickIcon, {
     color: value,
-    checked: checked
-  }));
+    type: "tick"
+  })));
 });
-SimpleColor.defaultProps = {
-  checked: false,
-  onChange: null
-};
 SimpleColor.propTypes = {
-  /** the value of the color that is represented by this SimpleColor */
-  value: PropTypes.string,
-
-  /** the input name */
-  name: PropTypes.string,
-
-  /** called when the user selects or deselects this color option */
-  onChange: PropTypes.func,
-
-  /** A callback triggered when a color is selected. */
-  onBlur: PropTypes.func,
-
-  /** A callback triggered when a color is selected. */
-  onMouseDown: PropTypes.func,
-
-  /** determines if this color option is selected or unselected */
-  checked: PropTypes.bool,
-
-  /** [Legacy] Custom classname */
-  className: PropTypes.string
+  "checked": PropTypes.bool,
+  "className": PropTypes.string,
+  "defaultChecked": PropTypes.bool,
+  "disabled": PropTypes.bool,
+  "id": PropTypes.string,
+  "name": PropTypes.string,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func,
+  "onMouseDown": PropTypes.func,
+  "value": PropTypes.string.isRequired
 };
+export { SimpleColor };
 SimpleColor.displayName = "SimpleColor";
 export default SimpleColor;

package/esm/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/esm/components/simple-color-picker/simple-color/simple-color.style.js

@@ -1,5 +1,9 @@
-import styled from "styled-components";
-const StyledSimpleColor = styled.div`
+import styled, { css } from "styled-components";
+import { Input } from "../../../__internal__/input";
+import checkerBoardSvg from "./checker-board.svg";
+import Icon from "../../icon";
+import getRgbValues from "../../../style/utils/get-rgb-values";
+export const StyledSimpleColor = styled.div`
   width: var(--sizing700);
   height: var(--sizing700);
   margin-right: 2px;
@@ -9,4 +13,74 @@ const StyledSimpleColor = styled.div`
     cursor: pointer;
   }
 `;
-export default StyledSimpleColor;
+export 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;
+    `}
+`;
+export const StyledSimpleColorInput = styled(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);
+  }
+`;
+
+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)";
+};
+
+export const StyledTickIcon = styled(Icon)`
+  height: 22px;
+  width: 22px;
+  pointer-events: none;
+  display: block;
+
+  &::before {
+    font-size: 22px;
+    color: ${({
+  color
+}) => getIconColor(color)};
+  }
+`;

package/esm/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;