carbon-react 93.0.4 → 94.0.3

package/lib/__internal__/checkable-input/checkable-input.component.js

@@ -58,7 +58,9 @@ const CheckableInput = ({
   const {
     current: id
   } = (0, _react.useRef)(inputId || (0, _guid.default)());
-  const helpId = `${id} help`;
+  const labelId = `${id}-label`;
+  const helpId = [error, warning, info, labelHelp].filter(validation => typeof validation === "string").length ? `${id}-help` : undefined;
+  const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
   const isRadio = type === "radio";
   const formFieldProps = {
     disabled,
@@ -66,12 +68,14 @@ const CheckableInput = ({
     fieldHelp,
     fieldHelpInline,
     helpId,
+    fieldHelpId,
     id,
     info,
     label,
     labelAlign,
     labelHelp,
     labelHelpIcon: "info",
+    labelId,
     labelInline,
     labelSpacing,
     name: id,
@@ -87,10 +91,12 @@ const CheckableInput = ({
     checked,
     disabled,
     helpId,
+    fieldHelpId,
     id,
     inputRef,
     type,
     value,
+    labelId,
     name,
     onBlur,
     onChange,

package/lib/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -23,6 +23,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const HiddenCheckableInput = ({
   helpId,
+  fieldHelpId,
+  labelId,
   name,
   checked,
   type,
@@ -69,11 +71,13 @@ const HiddenCheckableInput = ({
     if (onMouseLeaveGroup) onMouseLeaveGroup(ev);
   };
 
+  const ariaDescribedBy = [fieldHelpId, helpId].filter(Boolean).join(" ");
   return /*#__PURE__*/_react.default.createElement(_hiddenCheckableInput.default, _extends({
     autoFocus: autoFocus,
     "aria-checked": checked,
     checked: checked,
-    "aria-describedby": helpId,
+    "aria-labelledby": labelId,
+    "aria-describedby": ariaDescribedBy,
     name: name,
     role: type,
     type: type,
@@ -98,6 +102,9 @@ HiddenCheckableInput.propTypes = {
   /** Element id for aria-describedby */
   helpId: _propTypes.default.string,
 
+  /** Element id for aria-describedby */
+  fieldHelpId: _propTypes.default.string,
+
   /** Input name */
   name: _propTypes.default.string,
 
@@ -116,6 +123,9 @@ HiddenCheckableInput.propTypes = {
   /** OnMouseEnter event handler */
   onMouseEnter: _propTypes.default.func,
 
+  /** Element id for aria-labelledby */
+  labelId: _propTypes.default.string,
+
   /** HTML type attribute of the input */
   type: _propTypes.default.string.isRequired,
 

package/lib/__internal__/checkable-input/hidden-checkable-input.d.ts

@@ -24,7 +24,7 @@ export interface CommonHiddenCheckableInputProps
   /** Value of the input */
   value?: string;
   /** A callback to retrieve the input reference */
-  inputRef: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement>;
 }
 
 export interface HiddenCheckableInputProps
@@ -33,6 +33,10 @@ export interface HiddenCheckableInputProps
   type: string;
   /** Element id for aria-describedby */
   helpId?: string;
+  /** Element id for aria-describedby */
+  fieldHelpId?: string;
+  /** Element id for aria-labelledby */
+  labelId?: string;
 }
 
 declare function HiddenCheckableInput(

package/lib/__internal__/form-field/form-field.component.js

@@ -38,12 +38,13 @@ const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.de
 const FormField = ({
   children,
   disabled,
-  fieldHelp,
+  fieldHelp: fieldHelpContent,
   fieldHelpInline,
   error,
   warning,
   info,
   helpId,
+  fieldHelpId,
   helpTabIndex,
   label,
   labelId,
@@ -77,6 +78,11 @@ const FormField = ({
     }
   }, [id, context, error, warning, info]);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
+  const fieldHelp = fieldHelpContent ? /*#__PURE__*/_react.default.createElement(_fieldHelp.default, {
+    labelInline: inlineLabel,
+    labelWidth: labelWidth,
+    id: fieldHelpId
+  }, fieldHelpContent) : null;
   return /*#__PURE__*/_react.default.createElement(_formField.default, _extends({}, (0, _tags.default)(rest["data-component"], rest), marginProps), /*#__PURE__*/_react.default.createElement(_formField.FieldLineStyle, {
     inline: inlineLabel
   }, reverse && children, label && /*#__PURE__*/_react.default.createElement(_label.default, {
@@ -98,13 +104,7 @@ const FormField = ({
     pr: !reverse ? labelSpacing : undefined,
     pl: reverse ? labelSpacing : undefined,
     isRequired: isRequired
-  }, label), fieldHelp && fieldHelpInline && /*#__PURE__*/_react.default.createElement(_fieldHelp.default, {
-    labelInline: inlineLabel,
-    labelWidth: labelWidth
-  }, fieldHelp), !reverse && children), fieldHelp && !fieldHelpInline && /*#__PURE__*/_react.default.createElement(_fieldHelp.default, {
-    labelInline: inlineLabel,
-    labelWidth: labelWidth
-  }, fieldHelp));
+  }, label), fieldHelpInline && fieldHelp, !reverse && children), !fieldHelpInline && fieldHelp);
 };
 
 const errorPropType = (props, propName, componentName, ...rest) => {
@@ -129,6 +129,7 @@ FormField.propTypes = {
   warning: errorPropType,
   info: errorPropType,
   helpId: _propTypes.default.string,
+  fieldHelpId: _propTypes.default.string,
   helpTabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   id: _propTypes.default.string.isRequired,
   isOptional: _propTypes.default.bool,

package/lib/__internal__/form-field/form-field.d.ts

@@ -11,6 +11,8 @@ export interface CommonFormFieldPropTypes
   fieldHelp?: React.ReactNode;
   /** The unique id of the Help component */
   helpId?: string;
+  /** The unique id of the FieldHelp component */
+  fieldHelpId?: string;
   /** Overrides the default tabindex of the Help component */
   helpTabIndex?: number | string;
   /** Label content */

package/lib/components/action-popover/action-popover.component.js

@@ -56,7 +56,7 @@ const ActionPopover = ({
   const [isOpen, setOpenState] = (0, _react.useState)(false);
   const [focusIndex, setFocusIndex] = (0, _react.useState)(0);
   const [guid] = (0, _react.useState)((0, _guid.default)());
-  const button = (0, _react.useRef)();
+  const buttonRef = (0, _react.useRef)();
   const menu = (0, _react.useRef)();
   const itemCount = (0, _react.useMemo)(() => {
     return _react.default.Children.toArray(children).filter(child => child.type === _actionPopoverItem.default).length;
@@ -94,7 +94,7 @@ const ActionPopover = ({
 
     if (!isOpening) {
       // Closing the menu should focus the MenuButton
-      button.current.focus();
+      buttonRef.current.querySelector("[data-component='action-popover-button']").focus();
     }
   }, [isOpen, setOpen]); // Keyboard commands implemented as recommended by WAI-ARIA best practices
   // https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html
@@ -112,7 +112,7 @@ const ActionPopover = ({
       setOpen(true);
     }
   }, [itemCount, setOpen]);
-  const focusButton = (0, _react.useCallback)(() => button.current.focus(), []);
+  const focusButton = (0, _react.useCallback)(() => buttonRef.current.querySelector("[data-component='action-popover-button']").focus(), []);
   (0, _react.useEffect)(() => {
     const handler = ({
       target
@@ -120,7 +120,7 @@ const ActionPopover = ({
       // If the event didn't came from part of this component, close the menu.
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page
-      if (!button.current.contains(target) && menu.current && !menu.current.contains(target)) {
+      if (!buttonRef.current.contains(target) && menu.current && !menu.current.contains(target)) {
         setOpen(false);
       }
     };
@@ -136,23 +136,37 @@ const ActionPopover = ({
     };
   }, [setOpen]);
 
-  const menuButton = () => {
+  const menuButton = menuID => {
     if (renderButton) {
       return renderButton({
-        tabIndex: -1,
-        "data-element": "action-popover-menu-button"
+        tabIndex: isOpen ? "-1" : "0",
+        "data-component": "action-popover-button",
+        ariaAttributes: {
+          "aria-haspopup": "true",
+          "aria-label": l.actionPopover.ariaLabel(),
+          "aria-controls": menuID,
+          "aria-expanded": isOpen
+        }
       });
     }
 
-    return /*#__PURE__*/_react.default.createElement(_actionPopover.ButtonIcon, {
+    return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledButtonIcon, {
+      role: "button",
+      "aria-haspopup": "true",
+      "aria-label": l.actionPopover.ariaLabel(),
+      "aria-controls": menuID,
+      "aria-expanded": isOpen,
+      tabIndex: isOpen ? "-1" : "0",
+      "data-component": "action-popover-button"
+    }, /*#__PURE__*/_react.default.createElement(_actionPopover.ButtonIcon, {
       type: "ellipsis_vertical"
-    });
+    }));
   };
 
   const parentID = id || `ActionPopoverButton_${guid}`;
   const menuID = `ActionPopoverMenu_${guid}`;
   const menuProps = {
-    button,
+    buttonRef,
     parentID,
     setFocusIndex,
     focusIndex,
@@ -165,18 +179,12 @@ const ActionPopover = ({
   };
   return /*#__PURE__*/_react.default.createElement(_actionPopover.MenuButton, _extends({
     id: parentID,
-    "data-component": "action-popover-button",
-    role: "button",
-    "aria-haspopup": "true",
-    "aria-label": l.actionPopover.ariaLabel(),
-    "aria-controls": menuID,
-    "aria-expanded": isOpen,
-    tabIndex: isOpen ? "-1" : "0",
+    "data-component": "action-popover-wrapper",
     onKeyDown: onButtonKeyDown,
     onClick: onButtonClick,
     isOpen,
-    ref: button
-  }, rest), menuButton(), /*#__PURE__*/_react.default.createElement(_actionPopoverContext.default.Provider, {
+    ref: buttonRef
+  }, rest), menuButton(menuID), /*#__PURE__*/_react.default.createElement(_actionPopoverContext.default.Provider, {
     value: {
       setOpenPopover: setOpen,
       focusButton,
@@ -184,7 +192,7 @@ const ActionPopover = ({
     }
   }, isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, {
     placement: mappedPlacement,
-    reference: button
+    reference: buttonRef
   }, /*#__PURE__*/_react.default.createElement(_actionPopoverMenu.default, _extends({
     "data-component": "action-popover",
     role: "menu",

package/lib/components/action-popover/action-popover.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.ButtonIcon = exports.MenuButton = exports.MenuItemFactory = exports.Menu = void 0;
+exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.StyledButtonIcon = exports.ButtonIcon = exports.MenuButton = exports.MenuItemFactory = exports.Menu = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -131,16 +131,6 @@ const MenuButton = _styledComponents.default.div`
   isOpen,
   theme
 }) => isOpen && `background-color: ${theme.colors.white}`}
-  &:hover, &:focus {
-    background-color: ${({
-  theme
-}) => theme.colors.white};
-  }
-  &:focus {
-    outline: 2px solid ${({
-  theme
-}) => theme.colors.focus};
-  }
 `;
 /**
  * Creates a factory that returns a styled component with a custom
@@ -168,6 +158,21 @@ const iconThemeProviderFactory = (Component, themeFn) => (0, _styledComponents.w
 
 const ButtonIcon = iconThemeProviderFactory(_icon.default, palette => palette.slate);
 exports.ButtonIcon = ButtonIcon;
+const StyledButtonIcon = _styledComponents.default.div`
+  &:hover,
+  &:focus {
+    background-color: ${({
+  theme
+}) => theme.colors.white};
+  }
+
+  &:focus {
+    outline: 2px solid ${({
+  theme
+}) => theme.colors.focus};
+  }
+`;
+exports.StyledButtonIcon = StyledButtonIcon;
 const MenuItemIcon = (0, _styledComponents.default)(iconThemeProviderFactory(_icon.default, () => "inherit"))`
   ${({
   theme,
@@ -203,13 +208,18 @@ exports.SubMenuItemIcon = SubMenuItemIcon;
 const MenuButtonOverrideWrapper = _styledComponents.default.div`
   ${({
   theme
-}) => `
+}) => (0, _styledComponents.css)`
     ${_button.default} {
       padding: 0px ${theme.spacing}px;
       width: 100%;
       &:focus {
         outline-width: 2px;
       }
+
+      &:hover,
+      &:focus {
+        background-color: ${theme.colors.white};
+      }
     }
   `}
 `;

package/lib/components/i18n-provider/i18n-provider.component.js

@@ -38,9 +38,6 @@ I18nProvider.propTypes = {
     actionPopover: _propTypes.default.shape({
       ariaLabel: _propTypes.default.func
     }),
-    actionToolbar: _propTypes.default.shape({
-      selected: _propTypes.default.func
-    }),
     batchSelection: _propTypes.default.shape({
       selected: _propTypes.default.func
     }),

package/lib/locales/en-gb.js

@@ -11,15 +11,11 @@ var _default = {
   locale: () => "en-GB",
   actions: {
     edit: () => "Edit",
-    delete: () => "Delete",
-    reset: () => "Reset Columns"
+    delete: () => "Delete"
   },
   actionPopover: {
     ariaLabel: () => "actions"
   },
-  actionToolbar: {
-    selected: () => "Selected"
-  },
   batchSelection: {
     selected: count => `${count} selected`
   },
@@ -91,9 +87,6 @@ var _default = {
     on: () => "ON",
     off: () => "OFF"
   },
-  table: {
-    noData: () => "No results to display"
-  },
   textEditor: {
     tooltipMessages: {
       bold: () => "Bold",

package/lib/locales/locale.d.ts

@@ -3,14 +3,10 @@ interface Locale {
   actions: {
     edit: () => string;
     delete: () => string;
-    reset: () => string;
   };
   actionPopover: {
     ariaLabel: () => string;
   };
-  actionToolbar: {
-    selected: () => string;
-  };
   batchSelection: {
     selected: (count: number | string) => string;
   };
@@ -62,9 +58,6 @@ interface Locale {
     on: () => string;
     off: () => string;
   };
-  table: {
-    noData: () => string;
-  };
   textEditor: {
     tooltipMessages: {
       bold: () => string;

package/lib/locales/pl-pl.js

@@ -11,15 +11,11 @@ var _default = {
   locale: () => "pl-PL",
   actions: {
     edit: () => "Edytuj",
-    delete: () => "Usuń",
-    reset: () => "Resetuj Kolumny"
+    delete: () => "Usuń"
   },
   actionPopover: {
     ariaLabel: () => "akcje"
   },
-  actionToolbar: {
-    selected: () => "Wybrano"
-  },
   batchSelection: {
     selected: count => `${count} wybrano`
   },
@@ -83,9 +79,6 @@ var _default = {
     on: () => "WŁ",
     off: () => "WYŁ"
   },
-  table: {
-    noData: () => "Brak wyników"
-  },
   textEditor: {
     tooltipMessages: {
       bold: () => "Pogrubiony",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "93.0.4",
+  "version": "94.0.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -84,7 +84,6 @@
     "babel-eslint": "10.0.3",
     "babel-jest": "^26.6.3",
     "browserslist": "^4.16.6",
-    "carbon-state-management": "^1.0.0",
     "chalk": "^4.1.1",
     "commitizen": "^4.2.4",
     "conventional-changelog-conventionalcommits": "^4.5.0",
@@ -114,7 +113,6 @@
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.2.0",
     "events": "~1.1.1",
-    "flux": "^4.0.1",
     "husky": "^4.3.6",
     "jest": "^26.6.3",
     "jest-styled-components": "^6.3.1",
@@ -124,7 +122,6 @@
     "prettier": "^2.1.2",
     "raf": "^3.4.0",
     "react": "^16.12.0",
-    "react-dnd-test-backend": "^10.0.2",
     "react-dom": "^16.12.0",
     "react-test-renderer": "^16.12.0",
     "rimraf": "^3.0.2",
@@ -151,8 +148,6 @@
     "react-day-picker": "~6.1.1",
     "react-dnd": "^10.0.2",
     "react-dnd-html5-backend": "^10.0.2",
-    "react-dnd-legacy": "npm:react-dnd@^2.6.0",
-    "react-dnd-touch-backend": "0.2.7",
     "react-is": "^17.0.2",
     "react-transition-group": "^4.4.1",
     "sprintf-js": "^1.1.2",

package/lib/components/action-toolbar/action-toolbar.component.js

@@ -1,213 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _link = _interopRequireDefault(require("../link"));
-
-var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
-
-var _actionToolbar = require("./action-toolbar.style");
-
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-
-var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-let deprecatedWarnTriggered = false;
-/**
- * A ActionToolbar widget.
- *
- * == How to use a ActionToolbar in a component:
- *
- * In your file
- *
- *   import ActionToolbar from 'carbon-react/lib/components/action-toolbar';
- *
- * To render an ActionToolbar:
- *
- *   let actions = {
- *     subscription: {
- *       text: "Add Subscriptions",
- *       icon: "basket",
- *       onClick: onClickHandler(event, selected) => {}
- *     },
- *     delete: {
- *       text: "Delete",
- *       icon: "bin",
- *       onClick: onClickHandler(event, selected) => {}
- *     }
- *   };
- *
- *   <ActionToolbar total={ count } actions={ actions } />
- *
- *  Additional props for Link or Icon can be passed in the action object.
- *
- */
-
-let ActionToolbar = /*#__PURE__*/function (_React$Component) {
-  _inherits(ActionToolbar, _React$Component);
-
-  var _super = _createSuper(ActionToolbar);
-
-  function ActionToolbar(...args) {
-    var _this;
-
-    _classCallCheck(this, ActionToolbar);
-
-    _this = _super.call(this, ...args);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      total: 0,
-      selected: {}
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleOnClick", (onClick, selected) => {
-      if (!onClick) {
-        return null;
-      }
-
-      return event => onClick(selected, event);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "propsForChildren", () => {
-      return {
-        disabled: !_this.isActive(),
-        selected: _this.state.selected,
-        total: _this.state.total
-      };
-    });
-
-    _this.actions = _this.actions.bind(_assertThisInitialized(_this));
-    _this.isActive = _this.isActive.bind(_assertThisInitialized(_this));
-    _this.buildAction = _this.buildAction.bind(_assertThisInitialized(_this));
-
-    if (!deprecatedWarnTriggered) {
-      deprecatedWarnTriggered = true;
-
-      _logger.default.deprecate("`ActionToolbar` component is deprecated and will soon be removed.");
-    }
-
-    return _this;
-  }
-
-  _createClass(ActionToolbar, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      if (this.context.attachActionToolbar) {
-        this.context.attachActionToolbar(this);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.context.detachActionToolbar) {
-        this.context.detachActionToolbar(this);
-      }
-    }
-  }, {
-    key: "actions",
-    value: function actions() {
-      const actions = [];
-
-      for (const key in this.props.actions) {
-        const action = this.props.actions[key];
-        actions.push(this.buildAction(action, key));
-      }
-
-      return actions;
-    }
-  }, {
-    key: "isActive",
-    value: function isActive() {
-      return this.state.total > 0;
-    }
-  }, {
-    key: "linkClasses",
-    value: function linkClasses(className) {
-      return (0, _classnames.default)(className);
-    }
-  }, {
-    key: "buildAction",
-    value: function buildAction(action, index) {
-      const {
-        onClick,
-        className,
-        text,
-        ...props
-      } = action;
-      return /*#__PURE__*/_react.default.createElement(_link.default, _extends({
-        className: this.linkClasses(className),
-        "data-element": "action",
-        disabled: !this.isActive(),
-        key: index,
-        onClick: this.handleOnClick(onClick, this.state.selected)
-      }, props), text);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_actionToolbar.StyledActionToolbar, _extends({
-        className: this.props.className
-      }, (0, _tags.default)("action-toolbar", this.props)), /*#__PURE__*/_react.default.createElement(_actionToolbar.StyledActionToolbarTotal, null, /*#__PURE__*/_react.default.createElement("strong", {
-        "data-element": "total"
-      }, this.state.total), "\xA0", /*#__PURE__*/_react.default.createElement(_i18nContext.default.Consumer, null, l => l.actionToolbar.selected())), /*#__PURE__*/_react.default.createElement(_actionToolbar.StyledActionToolbarActions, {
-        disabled: !this.isActive()
-      }, this.actions(), this.props.children && this.props.children(this.propsForChildren())));
-    }
-  }]);
-
-  return ActionToolbar;
-}(_react.default.Component);
-
-ActionToolbar.propTypes = {
-  /** The actions to display in the toolbar */
-  actions: _propTypes.default.object.isRequired,
-
-  /** A custom class name for the component. */
-  className: _propTypes.default.string,
-
-  /** A function to return child components for the action toolbar. */
-  children: _propTypes.default.func
-};
-ActionToolbar.contextTypes = {
-  attachActionToolbar: _propTypes.default.func,
-  // tracks the action toolbar component
-  detachActionToolbar: _propTypes.default.func // tracks the action toolbar component
-
-};
-var _default = ActionToolbar;
-exports.default = _default;