carbon-react 111.12.1 → 111.12.3

package/esm/components/switch/switch.style.d.ts

@@ -0,0 +1,4 @@
+import { SwitchProps } from "./switch.component";
+declare type StyledSwitchProps = Pick<SwitchProps, "fieldHelpInline" | "labelInline" | "reverse" | "size">;
+declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, StyledSwitchProps, never>;
+export default StyledSwitch;

package/esm/components/switch/switch.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import FieldHelpStyle from "../../__internal__/field-help/field-help.style";
@@ -150,13 +149,6 @@ const StyledSwitch = styled.div`
     `}
   `}
 `;
-StyledSwitch.propTypes = {
-  disabled: PropTypes.bool,
-  fieldHelpInline: PropTypes.bool,
-  labelInline: PropTypes.bool,
-  reverse: PropTypes.bool,
-  size: PropTypes.string
-};
 StyledSwitch.defaultProps = {
   theme: baseTheme
 };

package/esm/components/tabs/__internal__/tab-title/tab-title.component.js

@@ -1,5 +1,4 @@
 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, useState } from "react";
 import PropTypes from "prop-types";
 import { StyledTabTitle, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator } from "./tab-title.style";
@@ -42,64 +41,54 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
   const hasFailedValidation = error || warning || info;
   const [shouldShowTooltip, setShouldShowTooltip] = useState(false);
   const hasHover = useRef(false);
-
   const showTooltip = () => {
     setShouldShowTooltip(true);
   };
-
   const hideTooltip = () => {
     if ((ref === null || ref === void 0 ? void 0 : ref.current) !== document.activeElement && !hasHover.current) {
       setShouldShowTooltip(false);
     }
   };
-
   if (siblings && !keys.current.length) {
     siblings.forEach(() => keys.current.push(createGuid()));
   }
-
   const handleKeyDown = ev => {
     ev.stopPropagation();
-
     if (href && Events.isEnterOrSpaceKey(ev)) {
       return window.open(href, "_blank");
     }
-
     return onKeyDown(ev);
   };
-
   const handleClick = ev => {
     var _ref$current;
-
     ev.preventDefault();
-    const customEvent = { ...ev,
-      target: { ...ev.target,
+    const customEvent = {
+      ...ev,
+      target: {
+        ...ev.target,
         dataset: {
           tabid: dataTabId
         }
       }
     };
-
     if (href) {
       onClick(customEvent);
       return window.open(href, "_blank");
-    } // safari does not focus buttons by default
-
+    }
 
+    // safari does not focus buttons by default
     (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     return onClick(customEvent);
   };
-
   const renderContent = () => {
     if (customLayout) {
       return /*#__PURE__*/React.createElement(StyledLayoutWrapper, {
         hasCustomLayout: true
       }, customLayout);
     }
-
     if (!siblings) {
       return title;
     }
-
     const titleText = /*#__PURE__*/React.createElement(React.Fragment, {
       key: "title"
     }, title);
@@ -108,14 +97,14 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
       key: "title-siblings"
     }, siblings.map((child, index) => {
       const key = child.props.key || keys.current[index];
-      return /*#__PURE__*/React.cloneElement(child, { ...child.props,
+      return /*#__PURE__*/React.cloneElement(child, {
+        ...child.props,
         onClick: handleClick,
         key
       });
     }));
     return titlePosition === "before" ? [titleText, titleSiblings] : [titleSiblings, titleText];
   };
-
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipVisible: shouldShowTooltip
   }, /*#__PURE__*/React.createElement(TabTitleContext.Provider, {

package/esm/components/tabs/__internal__/tabs-header/tabs-header.component.js

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { StyledTabsHeaderWrapper, StyledTabsHeaderList } from "./tabs-header.style";
-
 const TabsHeader = ({
   align = "left",
   children,
@@ -25,7 +24,6 @@ const TabsHeader = ({
     isInSidebar: isInSidebar
   }, children));
 };
-
 TabsHeader.propTypes = {
   align: PropTypes.oneOf(["left", "right"]),
   children: PropTypes.node.isRequired,

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
-
 const computeLineWidth = ({
   alternateStyling,
   isInSidebar,
@@ -9,10 +8,8 @@ const computeLineWidth = ({
   if (isInSidebar && position === "left") {
     return "0px";
   }
-
   return alternateStyling ? "-1px" : "-2px";
 };
-
 const StyledTabsHeaderWrapper = styled.div`
   ${({
   position,

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

@@ -1,5 +1,4 @@
 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, { useCallback, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -8,7 +7,6 @@ import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 const TabContext = /*#__PURE__*/React.createContext({});
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
-
 const Tab = ({
   ariaLabelledby,
   className,
@@ -29,21 +27,24 @@ const Tab = ({
   const [tabInfos, setTabInfos] = useState({});
   const setError = useCallback((childId, hasError) => {
     if (tabErrors[childId] !== hasError) {
-      setTabErrors({ ...tabErrors,
+      setTabErrors({
+        ...tabErrors,
         [childId]: hasError
       });
     }
   }, [tabErrors]);
   const setWarning = useCallback((childId, hasWarning) => {
     if (tabWarnings[childId] !== hasWarning) {
-      setTabWarnings({ ...tabWarnings,
+      setTabWarnings({
+        ...tabWarnings,
         [childId]: hasWarning
       });
     }
   }, [tabWarnings]);
   const setInfo = useCallback((childId, hasInfo) => {
     if (tabInfos[childId] !== hasInfo) {
-      setTabInfos({ ...tabInfos,
+      setTabInfos({
+        ...tabInfos,
         [childId]: hasInfo
       });
     }
@@ -77,58 +78,41 @@ const Tab = ({
     position: position
   }, tagComponent("tab", rest), rest), !href && children));
 };
-
-Tab.propTypes = { ...paddingPropTypes,
+Tab.propTypes = {
+  ...paddingPropTypes,
   title: PropTypes.string,
-
   /** A unique ID to identify this specific tab. */
   tabId: PropTypes.string.isRequired,
-
   /** @ignore @private */
   className: PropTypes.string,
-
   /** The child elements of Tab component. */
   children: PropTypes.node,
-
   /** Overrides Title default layout with a one defined in this prop */
   customLayout: PropTypes.node,
-
   /** @ignore @private Boolean indicating selected state of Tab. */
   isTabSelected: PropTypes.bool,
-
   /** The position of the Tab. */
   position: PropTypes.oneOf(["top", "left"]),
-
   /** @ignore @private */
   role: PropTypes.string,
-
   /** @ignore @private */
   ariaLabelledby: PropTypes.string,
-
   /** @ignore @private */
   updateErrors: PropTypes.func,
-
   /** @ignore @private */
   updateWarnings: PropTypes.func,
-
   /** @ignore @private */
   updateInfos: PropTypes.func,
-
   /** Message displayed when Tab has error */
   errorMessage: PropTypes.string,
-
   /** Message displayed when Tab has warning */
   warningMessage: PropTypes.string,
-
   /** Message displayed when Tab has warning */
   infoMessage: PropTypes.string,
-
   /** Additional content to display with title */
   siblings: PropTypes.arrayOf(PropTypes.node),
-
   /** Position title before or after siblings */
   titlePosition: PropTypes.oneOf(["before", "after"]),
-
   /** Allows Tab to be a link */
   href: PropTypes.string
 };

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

@@ -1,5 +1,4 @@
 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, { useCallback, useContext, useEffect, useMemo, useRef, useState, createRef, cloneElement, Children } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -12,7 +11,6 @@ import TabTitle from "./__internal__/tab-title";
 import { DrawerSidebarContext } from "../drawer";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
-
 const Tabs = ({
   align = "left",
   className,
@@ -31,11 +29,11 @@ const Tabs = ({
 }) => {
   /** The children nodes converted into an Array */
   const filteredChildren = useMemo(() => Children.toArray(children).filter(child => child), [children]);
-  /** Array of the tabIds for the child nodes */
 
+  /** Array of the tabIds for the child nodes */
   const tabIds = useMemo(() => filteredChildren.map(child => child.props.tabId), [filteredChildren]);
-  /** Array of refs to the TabTitle nodes */
 
+  /** Array of refs to the TabTitle nodes */
   const tabRefs = useMemo(() => Array.from({
     length: filteredChildren.length
   }).map(() => /*#__PURE__*/createRef()), [filteredChildren.length]);
@@ -50,40 +48,41 @@ const Tabs = ({
   const [tabsInfos, setTabsInfos] = useState({});
   const updateErrors = useCallback((id, hasError) => {
     if (tabsErrors[id] !== hasError) {
-      setTabsErrors({ ...tabsErrors,
+      setTabsErrors({
+        ...tabsErrors,
         [id]: hasError
       });
     }
   }, [tabsErrors]);
   const updateWarnings = useCallback((id, hasWarning) => {
     if (tabsWarnings[id] !== hasWarning) {
-      setTabsWarnings({ ...tabsWarnings,
+      setTabsWarnings({
+        ...tabsWarnings,
         [id]: hasWarning
       });
     }
   }, [tabsWarnings]);
   const updateInfos = useCallback((id, hasInfo) => {
     if (tabsInfos[id] !== hasInfo) {
-      setTabsInfos({ ...tabsInfos,
+      setTabsInfos({
+        ...tabsInfos,
         [id]: hasInfo
       });
     }
   }, [tabsInfos]);
-  /** Returns true/false for if the given tab id is selected. */
 
+  /** Returns true/false for if the given tab id is selected. */
   const isTabSelected = useCallback(tabId => tabId === selectedTabIdState, [selectedTabIdState]);
   const hasTabStop = useCallback(tabId => tabId === tabStopId, [tabStopId]);
-  /** Updates the currently visible tab */
 
+  /** Updates the currently visible tab */
   const updateVisibleTab = useCallback(tabid => {
     if (!isTabSelected(tabid)) {
       setSelectedTabIdState(tabid);
     }
-
     if (!hasTabStop(tabid)) {
       setTabStopId(tabid);
     }
-
     if (onTabChange) {
       onTabChange(tabid);
     }
@@ -91,10 +90,8 @@ const Tabs = ({
   const blurPreviousSelectedTab = useCallback(() => {
     const previousTabIndex = tabIds.indexOf(previousSelectedTabId.current);
     /* istanbul ignore else */
-
     if (previousTabIndex !== -1) {
       var _previousTabRef$curre;
-
       const previousTabRef = tabRefs[previousTabIndex];
       (_previousTabRef$curre = previousTabRef.current) === null || _previousTabRef$curre === void 0 ? void 0 : _previousTabRef$curre.blur();
     }
@@ -105,51 +102,43 @@ const Tabs = ({
         setSelectedTabIdState(selectedTabId);
         blurPreviousSelectedTab();
       }
-
       previousSelectedTabId.current = selectedTabId;
     }
   }, [blurPreviousSelectedTab, previousSelectedTabId, selectedTabId, selectedTabIdState]);
-  /** Determines if the tab titles are in a vertical format. */
 
+  /** Determines if the tab titles are in a vertical format. */
   const isVertical = currentPosition => currentPosition === "left";
-  /** Handles the changing of tabs with the mouse */
-
 
+  /** Handles the changing of tabs with the mouse */
   const handleTabClick = ev => {
     if (Event.isEventType(ev, "keydown")) {
       return;
     }
-
     const {
       tabid
     } = ev.target.dataset;
     updateVisibleTab(tabid);
   };
-  /** Focuses the tab for the reference specified */
-
 
+  /** Focuses the tab for the reference specified */
   const focusTab = ref => ref.current.focus();
-  /** Will trigger the tab at the given index. */
-
 
+  /** Will trigger the tab at the given index. */
   const goToTab = (event, index) => {
     event.preventDefault();
     let newIndex = index;
-
     if (index < 0) {
       newIndex = tabIds.length - 1;
     } else if (index === tabIds.length) {
       newIndex = 0;
     }
-
     const nextTabId = tabIds[newIndex];
     const nextRef = tabRefs[newIndex];
     updateVisibleTab(nextTabId);
     focusTab(nextRef);
   };
-  /** Handles the keyboard navigation of tabs */
-
 
+  /** Handles the keyboard navigation of tabs */
   const handleKeyDown = index => {
     return event => {
       const isTabVertical = isVertical(position);
@@ -157,7 +146,6 @@ const Tabs = ({
       const isDown = isTabVertical && Event.isDownKey(event);
       const isLeft = !isTabVertical && Event.isLeftKey(event);
       const isRight = !isTabVertical && Event.isRightKey(event);
-
       if (isUp || isLeft) {
         goToTab(event, index - 1);
       } else if (isDown || isRight) {
@@ -165,9 +153,8 @@ const Tabs = ({
       }
     };
   };
-  /** Build the headers for the tab component */
-
 
+  /** Build the headers for the tab component */
   const renderTabHeaders = () => {
     const tabTitles = filteredChildren.map((child, index) => {
       const {
@@ -234,12 +221,12 @@ const Tabs = ({
       isInSidebar: isInSidebar
     }, tabTitles);
   };
-  /** Builds the single currently selected tab */
-
 
+  /** Builds the single currently selected tab */
   const visibleTab = () => {
     const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
-    return tab && /*#__PURE__*/cloneElement(tab, { ...tab.props,
+    return tab && /*#__PURE__*/cloneElement(tab, {
+      ...tab.props,
       role: "tabpanel",
       position,
       isTabSelected: isTabSelected(tab.props.tabId),
@@ -250,18 +237,16 @@ const Tabs = ({
       updateInfos
     });
   };
-  /** Builds all tabs where non selected tabs have class of hidden */
-
 
+  /** Builds all tabs where non selected tabs have class of hidden */
   const renderTabs = () => {
     if (isInSidebar) return null;
-
     if (!renderHiddenTabs) {
       return visibleTab();
     }
-
     const tabs = filteredChildren.map(child => {
-      return /*#__PURE__*/cloneElement(child, { ...child.props,
+      return /*#__PURE__*/cloneElement(child, {
+        ...child.props,
         role: "tabpanel",
         position,
         isTabSelected: isTabSelected(child.props.tabId),
@@ -274,7 +259,6 @@ const Tabs = ({
     });
     return tabs;
   };
-
   return /*#__PURE__*/React.createElement(StyledTabs, _extends({
     className: className,
     position: isInSidebar ? "left" : position,
@@ -285,40 +269,29 @@ const Tabs = ({
     headerWidth: headerWidth
   }, rest), renderTabHeaders(), renderTabs());
 };
-
-Tabs.propTypes = { ...marginPropTypes,
-
+Tabs.propTypes = {
+  ...marginPropTypes,
   /** @ignore @private */
   className: PropTypes.string,
-
   /** Prevent rendering of hidden tabs, by default this is set to true and therefore all tabs will be rendered */
   renderHiddenTabs: PropTypes.bool,
-
   /** Allows manual control over the currently selected tab. */
   selectedTabId: PropTypes.string,
-
   /** The child elements of Tabs need to be Tab components. */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-
   /** Sets the alignment of the tab titles. Possible values include. */
   align: PropTypes.oneOf(["left", "right"]),
-
   /** A callback for when a tab is changed. You can use this to manually control
    * tab changing or to fire other events when a tab is changed. */
   onTabChange: PropTypes.func,
-
   /** The position of the tab title. */
   position: PropTypes.oneOf(["top", "left"]),
-
   /** Sets size of the tab titles. */
   size: PropTypes.oneOf(["default", "large"]),
-
   /** Sets the divider of the tab titles header to extend the full width of the parent. */
   extendedLine: PropTypes.bool,
-
   /** Adds a combination of borders to the tab titles. */
   borders: PropTypes.oneOf(["off", "on", "no left side", "no right side", "no sides"]),
-
   /** sets width to the tab headers. Can be any valid CSS string.
    * The headerWidth prop works only for `position="left"`
    */
@@ -326,13 +299,10 @@ Tabs.propTypes = { ...marginPropTypes,
     if (props.position !== "left" && props[propName] !== undefined) {
       return new Error(`Invalid usage of prop ${propName} in ${componentName}. The ${propName} can be used only if position is set to left`);
     }
-
     return null;
   },
-
   /** Adds an alternate styling variant to the tab titles. */
   variant: PropTypes.oneOf(["default", "alternate"]),
-
   /** An object to support overriding validation statuses, when the Tabs have custom targets for example.
    * The `id` property should match the `tabId`s for the rendered Tabs. */
   validationStatusOverride: PropTypes.shape({

package/esm/components/text-editor/__internal__/decorators/link-decorator.js

@@ -1,5 +1,4 @@
 import EditorLink from "../editor-link";
-
 function findWithRegex(regex, contentBlock, callback) {
   const text = contentBlock.getText();
   let matchArr;
@@ -14,23 +13,24 @@ function findWithRegex(regex, contentBlock, callback) {
       start += matchArr.index;
       callback(start, start + candidate.length);
     }
-
     start += candidate.length + 1;
   });
 }
-
 const linkStrategy = (contentBlock, callback) => {
   const combineRegex = (...regex) => new RegExp(regex.map(r => r.source).join(""), "g");
-
-  const urlRegex = combineRegex(/\b/, /(http:\/\/|https:\/\/|www\.)/, // prefix
-  /([\w-]+:([\w-]+@))?/, // userinfo
-  /([\w-]+\.)+\w+/, // domain
-  /(:\d+)?/, // port
-  /(\/[\w#!:.?+=&%@!-/]+)?/, // paths, queries, fragments
+  const urlRegex = combineRegex(/\b/, /(http:\/\/|https:\/\/|www\.)/,
+  // prefix
+  /([\w-]+:([\w-]+@))?/,
+  // userinfo
+  /([\w-]+\.)+\w+/,
+  // domain
+  /(:\d+)?/,
+  // port
+  /(\/[\w#!:.?+=&%@!-/]+)?/,
+  // paths, queries, fragments
   /\b/);
   findWithRegex(urlRegex, contentBlock, callback);
 };
-
 export default {
   strategy: linkStrategy,
   component: EditorLink

package/esm/components/text-editor/__internal__/editor-counter/editor-counter.component.js

@@ -2,7 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import { StyledCounterWrapper, StyledCounter } from "./editor-counter.style";
 import ValidationIcon from "../../../../__internal__/validations";
-
 const Counter = ({
   count = 0,
   limit = 3000,
@@ -21,20 +20,15 @@ const Counter = ({
 }), /*#__PURE__*/React.createElement(StyledCounter, {
   hasError: !!error
 }, `${limit - count}`));
-
 Counter.propTypes = {
   /** Sets the current count value */
   count: PropTypes.number,
-
   /** Sets the current limit value */
   limit: PropTypes.number,
-
   /** Message to be displayed when there is an error */
   error: PropTypes.string,
-
   /** Message to be displayed when there is a warning */
   warning: PropTypes.string,
-
   /** Message to be displayed when there is an info */
   info: PropTypes.string
 };

package/esm/components/text-editor/__internal__/editor-link/editor-link.component.js

@@ -1,10 +1,8 @@
 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, { useContext, useEffect } from "react";
 import PropTypes from "prop-types";
 import StyledLink from "./editor-link.style";
 import { EditorContext } from "../../text-editor.component";
-
 const EditorLink = ({
   children,
   contentState,
@@ -12,13 +10,11 @@ const EditorLink = ({
   ...rest
 }) => {
   const url = !!contentState && !!entityKey ? contentState.getEntity(entityKey).getData() : children[0].props.text;
-
   const buildValidUrl = () => {
     const candidateUrl = url.url || url;
     const regex = /(http:\/\/|https:\/\/)+/g;
     return regex.test(candidateUrl) ? candidateUrl : `https://${candidateUrl}`;
   };
-
   const validUrl = buildValidUrl();
   const {
     onLinkAdded,
@@ -27,8 +23,8 @@ const EditorLink = ({
   useEffect(() => {
     if (onLinkAdded) {
       onLinkAdded(validUrl);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [validUrl]);
   return /*#__PURE__*/React.createElement(StyledLink, _extends({
     href: !editMode ? validUrl : undefined,
@@ -38,7 +34,6 @@ const EditorLink = ({
     rel: "noopener noreferrer"
   }, rest), children);
 };
-
 EditorLink.propTypes = {
   children: PropTypes.node.isRequired,
   contentState: PropTypes.object,

package/esm/components/text-editor/__internal__/label-wrapper/label-wrapper.component.js

@@ -1,5 +1,4 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from "react";
 import PropTypes from "prop-types";
@@ -8,7 +7,6 @@ import PropTypes from "prop-types";
  * We have to manually trigger focus on TextEditor by clicking on label component.
  * This wrapper allows us to trigger focus on TextEditor
  */
-
 const LabelWrapper = ({
   onClick,
   children
@@ -17,7 +15,6 @@ const LabelWrapper = ({
     onClick: onClick
   }, " ", children, " ");
 };
-
 LabelWrapper.propTypes = {
   onClick: PropTypes.func.isRequired,
   children: PropTypes.node.isRequired

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.component.js

@@ -1,5 +1,4 @@
 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 from "react";
 import PropTypes from "prop-types";
 import StyledToolbarButton from "./toolbar-button.style";
@@ -36,19 +35,14 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef(({
 ToolbarButton.propTypes = {
   /** Accessibility label for a button */
   ariaLabel: PropTypes.string.isRequired,
-
   /** The children for the button */
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]).isRequired,
-
   /** Used to control the button's active status */
   activated: PropTypes.bool,
-
   /** Callback to handle any keydown events on a button */
   onKeyDown: PropTypes.func.isRequired,
-
   /** Callback to handle any mouse down events on a button */
   onMouseDown: PropTypes.func.isRequired,
-
   /** Controls whether the button can be tabbed to */
   tabbable: PropTypes.bool,
   onMouseOver: PropTypes.func,