carbon-react 111.22.0 → 111.22.2

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

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useState, useRef, useMemo, useEffect } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
+import invariant from "invariant";
 import Events from "../../__internal__/utils/helpers/events";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import Fieldset from "../../__internal__/fieldset";
@@ -12,7 +12,6 @@ import { StyledContent, StyledColorOptions } from "./simple-color-picker.style";
 import ValidationIcon from "../../__internal__/validations/validation-icon.component";
 import { InputGroupContext } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const SimpleColorPicker = props => {
   const {
@@ -33,11 +32,21 @@ const SimpleColorPicker = props => {
     required,
     ...rest
   } = props;
-  const filteredChildren = useMemo(() => React.Children.toArray(children), [children]);
-  const myRef = useRef(null);
+  const hasProperChildren = useMemo(() => {
+    let hasSimpleColorChildren = true;
+    React.Children.toArray(children).forEach(child => {
+      if (typeof child === "string" || /*#__PURE__*/React.isValidElement(child) && child.type.displayName !== "SimpleColor") {
+        hasSimpleColorChildren = false;
+      }
+    });
+    return hasSimpleColorChildren;
+  }, [children]);
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, `SimpleColorPicker accepts only children of type \`${SimpleColor.displayName}\`.`) : invariant(false) : void 0;
+  const filteredChildren = useMemo(() => React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child)), [children]);
+  const internalRef = useRef(null);
   const [blurBlocked, setIsBlurBlocked] = useState(isBlurBlocked);
   const [focusedElement, setFocusedElement] = 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;
@@ -90,19 +99,20 @@ const SimpleColorPicker = props => {
     const arrowKeys = [Events.isLeftKey(e), Events.isUpKey(e), Events.isRightKey(e), Events.isDownKey(e)];
     if (!arrowKeys.includes(true)) return;
     e.preventDefault();
-    let itemIndex;
+    let itemIndex = null;
+    const target = e.target;
 
     if (Events.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.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.isLeftKey(e) || Events.isRightKey(e)) {
       const position = element => {
-        return e.target.getAttribute("value") === element.props.value;
+        return target.getAttribute("value") === element.props.value;
       };
 
       if (Events.isLeftKey(e)) {
@@ -117,14 +127,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);
     }
   };
@@ -176,10 +190,7 @@ const SimpleColorPicker = props => {
   }) => /*#__PURE__*/React.createElement(StyledColorOptions, _extends({
     maxWidth: maxWidth,
     childWidth: childWidth,
-    error: error,
-    warning: warning,
-    info: info,
-    ref: myRef,
+    ref: internalRef,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
   }, validationProps), /*#__PURE__*/React.createElement(RadioButtonMapper, {
@@ -195,71 +206,175 @@ const SimpleColorPicker = props => {
 };
 
 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.Children.forEach(prop, child => {
-      if (child === null) {
-        return;
-      }
-
-      if (SimpleColor.displayName !== child.type.displayName) {
-        error = new Error(`\`${componentName}\` only accepts children of type \`${SimpleColor.displayName}\`.`);
-      }
-    });
-    return error;
-  },
-
-  /** Should the onBlur callback prop be initially blocked? */
-  isBlurBlocked: PropTypes.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.oneOfType([PropTypes.bool, PropTypes.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.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate additional information
-  Pass string to display icon, tooltip and blue border
-  Pass true boolean to only display blue border */
-  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** When true, validation icon will be placed on legend instead of being placed by the input */
-  validationOnLegend: PropTypes.bool,
-
-  /** The content for the RadioGroup Legend */
-  legend: PropTypes.string.isRequired,
-
-  /** The currently selected color. */
-  value: PropTypes.string,
-
-  /** The name to apply to the input. */
-  name: PropTypes.string,
-
-  /** A callback triggered when a color is selected. */
-  onChange: PropTypes.func,
-
-  /** A callback triggered when a color is selected. */
-  onBlur: PropTypes.func,
-
-  /** A callback triggered on key down. */
-  onKeyDown: PropTypes.func,
-
-  /** prop that sets max-width in css */
-  maxWidth: PropTypes.string,
-
-  /** prop that represents childWidth */
-  childWidth: PropTypes.string,
-
-  /** Flag to configure component as mandatory */
-  required: PropTypes.bool
+  "children": PropTypes.node,
+  "childWidth": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "isBlurBlocked": PropTypes.bool,
+  "legend": PropTypes.string.isRequired,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "maxWidth": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "name": PropTypes.string.isRequired,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func,
+  "onKeyDown": PropTypes.func,
+  "required": PropTypes.bool,
+  "validationOnLegend": PropTypes.bool,
+  "value": PropTypes.string,
+  "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
+export { SimpleColorPicker };
 export default SimpleColorPicker;

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

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
 const BORDER_WIDTH = 2;
 
-const getRoundedMaxWidth = (maxWidth, childWidth) => Math.floor(maxWidth / childWidth) * childWidth;
+const getRoundedMaxWidth = (maxWidth, childWidth) => Math.floor(+maxWidth / +childWidth) * +childWidth;
 
 const StyledContent = styled.div`
   display: flex;

package/esm/components/tabs/tab/tab.component.js

@@ -28,26 +28,20 @@ const Tab = ({
   const [tabWarnings, setTabWarnings] = useState({});
   const [tabInfos, setTabInfos] = useState({});
   const setError = useCallback((childId, error) => {
-    if (tabErrors[childId] !== error) {
-      setTabErrors({ ...tabErrors,
-        [childId]: error
-      });
-    }
-  }, [tabErrors]);
+    setTabErrors(state => state[childId] !== error ? { ...state,
+      [childId]: error
+    } : state);
+  }, []);
   const setWarning = useCallback((childId, warning) => {
-    if (tabWarnings[childId] !== warning) {
-      setTabWarnings({ ...tabWarnings,
-        [childId]: warning
-      });
-    }
-  }, [tabWarnings]);
+    setTabWarnings(state => state[childId] !== warning ? { ...state,
+      [childId]: warning
+    } : state);
+  }, []);
   const setInfo = useCallback((childId, info) => {
-    if (tabInfos[childId] !== info) {
-      setTabInfos({ ...tabInfos,
-        [childId]: info
-      });
-    }
-  }, [tabInfos]);
+    setTabInfos(state => state[childId] !== info ? { ...state,
+      [childId]: info
+    } : state);
+  }, []);
   useEffect(() => {
     if (updateErrors) {
       updateErrors(tabId, tabErrors);

package/esm/components/tabs/tabs.component.js

@@ -50,26 +50,20 @@ const Tabs = ({
   const [tabsWarnings, setTabsWarnings] = useState({});
   const [tabsInfos, setTabsInfos] = useState({});
   const updateErrors = useCallback((id, error) => {
-    if (tabsErrors[id] !== error) {
-      setTabsErrors({ ...tabsErrors,
-        [id]: error
-      });
-    }
-  }, [tabsErrors]);
+    setTabsErrors(state => ({ ...state,
+      [id]: error
+    }));
+  }, []);
   const updateWarnings = useCallback((id, warning) => {
-    if (tabsWarnings[id] !== warning) {
-      setTabsWarnings({ ...tabsWarnings,
-        [id]: warning
-      });
-    }
-  }, [tabsWarnings]);
+    setTabsWarnings(state => ({ ...state,
+      [id]: warning
+    }));
+  }, []);
   const updateInfos = useCallback((id, info) => {
-    if (tabsInfos[id] !== info) {
-      setTabsInfos({ ...tabsInfos,
-        [id]: info
-      });
-    }
-  }, [tabsInfos]);
+    setTabsInfos(state => ({ ...state,
+      [id]: info
+    }));
+  }, []);
   /** Returns true/false for if the given tab id is selected. */
 
   const isTabSelected = useCallback(tabId => tabId === selectedTabIdState, [selectedTabIdState]);

package/esm/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/esm/components/vertical-divider/vertical-divider.component.js

@@ -342,4 +342,6 @@ VerticalDivider.propTypes = {
   }), PropTypes.string]),
   "tint": PropTypes.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])
 };
+export { VerticalDivider };
+VerticalDivider.displayName = "VerticalDivider";
 export default VerticalDivider;

package/lib/__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/lib/__internal__/fieldset/fieldset.component.js

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

package/lib/__internal__/utils/storybook/partial-action.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function partialAction(actionName: string): (eventObj?: string | React.SyntheticEvent<Element, Event> | undefined, ...args: string[]) => void;
+export default partialAction;

package/lib/__internal__/utils/storybook/partial-action.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _addonActions = require("@storybook/addon-actions");
+
+function partialAction(actionName) {
+  return (eventObj, ...args) => {
+    (0, _addonActions.action)(actionName)(typeof eventObj === "string" ? {
+      view: undefined
+    } : { ...eventObj,
+      view: undefined
+    }, ...args);
+  };
+}
+
+var _default = partialAction;
+exports.default = _default;

package/lib/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/lib/components/accordion/accordion-group/accordion-group.component.js

@@ -281,5 +281,6 @@ AccordionGroup.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string])
 };
+AccordionGroup.displayName = "AccordionGroup";
 var _default = AccordionGroup;
 exports.default = _default;

package/lib/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/lib/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/lib/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ActionPopoverMenuButton = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -31,6 +31,7 @@ const ActionPopoverMenuButton = ({
   size: size
 }, props), children));
 
+exports.ActionPopoverMenuButton = ActionPopoverMenuButton;
 ActionPopoverMenuButton.propTypes = {
   "ariaAttributes": _propTypes.default.shape({
     "aria-controls": _propTypes.default.string.isRequired,
@@ -46,5 +47,6 @@ ActionPopoverMenuButton.propTypes = {
   "size": _propTypes.default.oneOf(["large", "medium", "small"]),
   "tabIndex": _propTypes.default.number.isRequired
 };
+ActionPopoverMenuButton.displayName = "ActionPopoverMenuButton";
 var _default = ActionPopoverMenuButton;
 exports.default = _default;