carbon-react 87.5.0 → 89.2.0

package/lib/components/profile/profile.component.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _ether = require("../../utils/ether/ether");
 
 var _tags = _interopRequireDefault(require("../../utils/helpers/tags/tags"));
@@ -25,117 +23,59 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
-
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
-let Profile = /*#__PURE__*/function (_React$Component) {
-  _inherits(Profile, _React$Component);
-
-  var _super = _createSuper(Profile);
-
-  function Profile() {
-    _classCallCheck(this, Profile);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Profile, [{
-    key: "hasSrc",
-    get:
-    /** Determines whether a `src` prop has been supplied */
-    function () {
-      return Boolean(this.props.src);
-    }
-    /** Returns the classes for the component. */
-
-  }, {
-    key: "classes",
-    get: function () {
-      return (0, _classnames.default)(this.props.className);
-    }
-    /** Returns the initials for the name. */
-
-  }, {
-    key: "initials",
-    get: function () {
-      if (this.props.initials) return this.props.initials;
-      return (0, _ether.acronymize)(this.props.name);
-    }
-  }, {
-    key: "marginProps",
-    get: function () {
-      return (0, _utils.filterStyledSystemMarginProps)(this.props);
-    }
-    /** Returns the avatar portion of the profile. */
-
-  }, {
-    key: "avatar",
-    get: function () {
-      if (this.hasSrc) {
-        return /*#__PURE__*/_react.default.createElement(_profile.ProfileAvatarStyle, {
-          src: this.props.src,
-          alt: this.initials,
-          initials: this.initials,
-          size: this.props.size,
-          shape: "square",
-          "data-element": "user-image"
-        });
-      }
-
+const Profile = ({
+  src,
+  className,
+  initials,
+  name,
+  size,
+  email,
+  ...props
+}) => {
+  const getInitials = () => {
+    if (initials) return initials;
+    return (0, _ether.acronymize)(name);
+  };
+
+  const avatar = () => {
+    if (src) {
       return /*#__PURE__*/_react.default.createElement(_profile.ProfileAvatarStyle, {
-        initials: this.initials,
-        gravatar: this.props.email,
-        size: this.props.size
+        src: src,
+        alt: getInitials(),
+        initials: getInitials(),
+        size: size,
+        shape: "square",
+        "data-element": "user-image"
       });
     }
-    /** Returns the text portion of the profile. */
-
-  }, {
-    key: "text",
-    get: function () {
-      return /*#__PURE__*/_react.default.createElement(_profile.ProfileDetailsStyle, {
-        size: this.props.size,
-        hasSrc: this.hasSrc
-      }, /*#__PURE__*/_react.default.createElement(_profile.ProfileNameStyle, {
-        size: this.props.size,
-        "data-element": "name"
-      }, this.props.name), /*#__PURE__*/_react.default.createElement(_profile.ProfileEmailStyle, {
-        size: this.props.size,
-        "data-element": "email"
-      }, this.props.email));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_profile.ProfileStyle, _extends({
-        large: this.props.large,
-        className: this.classes,
-        hasSrc: this.hasSrc
-      }, (0, _tags.default)("profile", this.props), this.marginProps), this.avatar, this.text);
-    }
-  }]);
 
-  return Profile;
-}(_react.default.Component);
+    return /*#__PURE__*/_react.default.createElement(_profile.ProfileAvatarStyle, {
+      initials: getInitials(),
+      gravatar: email,
+      size: size
+    });
+  };
+
+  const text = () => {
+    return /*#__PURE__*/_react.default.createElement(_profile.ProfileDetailsStyle, {
+      size: size,
+      hasSrc: !!src
+    }, /*#__PURE__*/_react.default.createElement(_profile.ProfileNameStyle, {
+      size: size,
+      "data-element": "name"
+    }, name), /*#__PURE__*/_react.default.createElement(_profile.ProfileEmailStyle, {
+      size: size,
+      "data-element": "email"
+    }, email));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_profile.ProfileStyle, _extends({
+    className: className,
+    hasSrc: !!src
+  }, (0, _tags.default)("profile", props), (0, _utils.filterStyledSystemMarginProps)(props)), avatar(), text());
+};
 
 Profile.propTypes = { ...marginPropTypes,
 
@@ -154,14 +94,8 @@ Profile.propTypes = { ...marginPropTypes,
   /** Define initials to display if there is no Gravatar image. */
   initials: _propTypes.default.string,
 
-  /** [Legacy] Enable a larger theme for the name. */
-  large: _propTypes.default.bool,
-
   /** Allow to setup size for the component */
   size: _propTypes.default.oneOf(["XS", "S", "M", "ML", "L", "XL", "XXL"])
 };
-Profile.defaultProps = {
-  large: false
-};
 var _default = Profile;
 exports.default = _default;

package/lib/components/profile/profile.d.ts

@@ -11,8 +11,6 @@ export interface ProfileProps {
   email: string;
   /** Define initials to display if there is no Gravatar image. */
   initials?: string;
-  /** [Legacy] Enable a larger theme for the name. */
-  large?: boolean;
   /** Allow to setup size for the component */
   size?: "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
 }

package/lib/components/scrollable-list/scrollable-list.component.js

@@ -314,7 +314,7 @@ let ScrollableList = /*#__PURE__*/function (_Component) {
   return ScrollableList;
 }(_react.Component);
 
-_defineProperty(ScrollableList, "propTypes", {
+ScrollableList.propTypes = {
   alwaysHighlight: _propTypes.default.bool,
   // ensures an item is always highlighted
   isLoopable: _propTypes.default.bool,
@@ -323,7 +323,6 @@ _defineProperty(ScrollableList, "propTypes", {
   maxHeight: _propTypes.default.string,
   onLazyLoad: _propTypes.default.func,
   onSelect: _propTypes.default.func
-});
-
+};
 var _default = ScrollableList;
 exports.default = _default;

package/lib/components/show-edit-pod/show-edit-pod.component.js

@@ -260,9 +260,7 @@ let ShowEditPod = /*#__PURE__*/function (_React$Component) {
 }(_react.default.Component);
 
 exports.BaseShowEditPod = ShowEditPod;
-
-_defineProperty(ShowEditPod, "contextType", _i18nContext.default);
-
+ShowEditPod.contextType = _i18nContext.default;
 ShowEditPod.propTypes = { ...marginPropTypes,
 
   /** Pod theme variant. */

package/lib/components/sidebar/sidebar.component.js

@@ -48,7 +48,8 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   onCancel,
   ...rest
 }, ref) => {
-  const sidebarRef = ref || (0, _react.useRef)();
+  let sidebarRef = (0, _react.useRef)();
+  if (ref) sidebarRef = ref;
 
   const closeIcon = () => {
     if (!onCancel) return null;

package/lib/components/table/table.component.js

@@ -660,9 +660,7 @@ let Table = /*#__PURE__*/function (_React$Component) {
 }(_react.default.Component);
 
 exports.Table = Table;
-
-_defineProperty(Table, "contextType", _i18nContext.default);
-
+Table.contextType = _i18nContext.default;
 Table.propTypes = {
   /**  The actions to display in the toolbar  */
   actions: _propTypes.default.object,

package/lib/components/text-editor/text-editor.component.js

@@ -65,7 +65,8 @@ const TextEditor = /*#__PURE__*/_react.default.forwardRef(({
   const [inlines, setInlines] = (0, _react.useState)([]);
   const [activeInlines, setActiveInlines] = (0, _react.useState)({});
   const [focusToolbar, setFocusToolbar] = (0, _react.useState)(false);
-  const editor = ref || (0, _react.useRef)();
+  const editorRef = (0, _react.useRef)();
+  const editor = ref || editorRef;
   const contentLength = (0, _utils.getContent)(value).getPlainText("").length;
   const moveCursor = (0, _react.useRef)(contentLength > 0);
   const lastKeyPressed = (0, _react.useRef)();

package/lib/components/textarea/textarea.component.js

@@ -245,9 +245,7 @@ let Textarea = /*#__PURE__*/function (_React$Component) {
 }(_react.default.Component);
 
 exports.OriginalTextarea = Textarea;
-
-_defineProperty(Textarea, "contextType", _i18nContext.default);
-
+Textarea.contextType = _i18nContext.default;
 Textarea.propTypes = { ...marginPropTypes,
 
   /** id of the input */

package/lib/components/{pod/pod-manager.component.js → tile-select/__internal__/accordion/accordion.component.js}

@@ -9,9 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _podContext = _interopRequireDefault(require("./pod-context"));
+var _accordion = require("./accordion.style");
 
-var _logger = _interopRequireDefault(require("../../utils/logger/logger"));
+var _useResizeObserver = _interopRequireDefault(require("../../../../hooks/__internal__/useResizeObserver"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -19,38 +19,38 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-let deprecatedWarnTriggered = false;
-
-const PodManager = ({
-  children
+const Accordion = ({
+  children,
+  expanded,
+  contentId,
+  controlId
 }) => {
-  if (!deprecatedWarnTriggered) {
-    deprecatedWarnTriggered = true; // eslint-disable-next-line max-len
-
-    _logger.default.deprecate("`PodManager` component is deprecated and will soon be removed.");
-  }
-
-  const podManagerRef = (0, _react.useRef)();
-  const [heightOfTheLongestPod, setHeightOfTheLongestPod] = (0, _react.useState)();
+  const [contentHeight, setContentHeight] = (0, _react.useState)(0);
+  const contentRef = (0, _react.useRef)(null);
+  (0, _useResizeObserver.default)(contentRef, () => {
+    setContentHeight(contentRef.current.scrollHeight);
+  });
   (0, _react.useEffect)(() => {
-    const allHeights = [];
-    const allPodNodeList = podManagerRef.current.querySelectorAll(`[data-component="pod"]`);
-    const allPodsArray = Array.from(allPodNodeList);
-    allPodsArray.map(el => allHeights.push(el.scrollHeight));
-    const tallerValue = Math.max(...allHeights);
-    setHeightOfTheLongestPod(tallerValue);
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_podContext.default.Provider, {
-    value: {
-      heightOfTheLongestPod
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: podManagerRef
+    setContentHeight(contentRef.current.scrollHeight);
+  }, [contentRef]);
+  return /*#__PURE__*/_react.default.createElement(_accordion.StyledContentContainer, {
+    "aria-expanded": expanded,
+    isExpanded: expanded,
+    maxHeight: contentHeight
+  }, /*#__PURE__*/_react.default.createElement(_accordion.StyledContent, {
+    role: "region",
+    "data-element": "tile-select-accordion-content",
+    ref: contentRef,
+    id: contentId,
+    "aria-labelledby": controlId
   }, children));
 };
 
-PodManager.propTypes = {
-  children: _propTypes.default.node
+Accordion.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  expanded: _propTypes.default.bool,
+  contentId: _propTypes.default.string,
+  controlId: _propTypes.default.string
 };
-var _default = PodManager;
+var _default = Accordion;
 exports.default = _default;

package/lib/components/tile-select/__internal__/accordion/accordion.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { SpaceProps } from "styled-system";
+
+export interface AccordionProps extends SpaceProps {
+  children: React.ReactNode;
+  expanded?: boolean;
+  contentId?: string;
+  controlId?: string;
+}
+
+declare function Accordion(props: AccordionProps): JSX.Element;
+
+export default Accordion;

package/lib/components/tile-select/__internal__/accordion/accordion.style.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledContent = exports.StyledContentContainer = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _accordion = require("../../../accordion/accordion.style");
+
+var _base = _interopRequireDefault(require("../../../../style/themes/base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledContentContainer = (0, _styledComponents.default)(_accordion.StyledAccordionContentContainer)`
+  background-color: ${({
+  theme
+}) => theme.tileSelect.hoverBackground};
+`;
+exports.StyledContentContainer = StyledContentContainer;
+const StyledContent = (0, _styledComponents.default)(_accordion.StyledAccordionContent)`
+  padding: 24px;
+  position: relative;
+  z-index: 200;
+`;
+exports.StyledContent = StyledContent;
+StyledContentContainer.defaultProps = {
+  theme: _base.default
+};

package/lib/components/tile-select/__internal__/accordion/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _accordion.default;
+  }
+});
+
+var _accordion = _interopRequireDefault(require("./accordion.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/tile-select/tile-select.component.js

@@ -5,30 +5,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
 var _tags = _interopRequireDefault(require("../../utils/helpers/tags/tags"));
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
+var _guid = _interopRequireDefault(require("../../utils/helpers/guid"));
+
 var _button = _interopRequireDefault(require("../button"));
 
 var _box = _interopRequireDefault(require("../box"));
 
+var _accordion = _interopRequireDefault(require("./__internal__/accordion"));
+
 var _tileSelect = require("./tile-select.style");
 
 var _utils = require("../../style/utils");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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); }
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
@@ -57,6 +61,9 @@ const TileSelect = ({
   footer,
   prefixAdornment,
   additionalInformation,
+  accordionContent,
+  accordionControl,
+  accordionExpanded,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -88,6 +95,9 @@ const TileSelect = ({
       setHasFocus(false);
     }
   }, [disabled, hasFocus]);
+  const guid = (0, _react.useRef)((0, _guid.default)());
+  const contentId = `AccordionContent_${guid.current}`;
+  const controlId = `AccordionControl_${guid.current}`;
   return /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTileSelectContainer, _extends({
     checked: checked,
     className: className,
@@ -121,14 +131,21 @@ const TileSelect = ({
     checked: checked
   }, /*#__PURE__*/_react.default.createElement(_box.default, {
     display: "flex",
-    justifyContent: "space-between"
-  }, prefixAdornment && /*#__PURE__*/_react.default.createElement(_box.default, {
-    mr: 3
-  }, prefixAdornment), /*#__PURE__*/_react.default.createElement(_box.default, {
+    justifyContent: "space-between",
+    flexDirection: "row-reverse"
+  }, (customActionButton || checked) && renderActionButton(), /*#__PURE__*/_react.default.createElement(_box.default, {
     flexGrow: "1"
   }, /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTitleContainer, null, title && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTitle, checkPropTypeIsNode(title), title), subtitle && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledSubtitle, checkPropTypeIsNode(subtitle), subtitle), titleAdornment && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAdornment, {
     hasAdditionalInformation: !!additionalInformation
-  }, titleAdornment)), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, checkPropTypeIsNode(description), description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer)), (customActionButton || checked) && renderActionButton()))));
+  }, titleAdornment)), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, checkPropTypeIsNode(description), description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer), accordionContent && accordionControl && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAccordionFooterWrapper, {
+    accordionExpanded: accordionExpanded
+  }, accordionControl(controlId, contentId))), prefixAdornment && /*#__PURE__*/_react.default.createElement(_box.default, {
+    mr: 3
+  }, prefixAdornment))), accordionContent && /*#__PURE__*/_react.default.createElement(_accordion.default, {
+    contentId: contentId,
+    controlId: controlId,
+    expanded: accordionExpanded
+  }, accordionContent)));
 };
 
 TileSelect.defaultProps = {
@@ -192,7 +209,19 @@ TileSelect.propTypes = { ...marginPropTypes,
   prefixAdornment: _propTypes.default.node,
 
   /** Component to render additional information row between title and description */
-  additionalInformation: _propTypes.default.node
+  additionalInformation: _propTypes.default.node,
+
+  /** Components to render in the TileSelect Accordion */
+  accordionContent: _propTypes.default.node,
+
+  /**
+   * Render prop to support rendering the control to handle the expanded state of the TileSelect Accordion.
+   * `(controlId, contentId) => <Button id={controlId} aria-controls={contentId}>...</Button>`
+   */
+  accordionControl: _propTypes.default.func,
+
+  /** Flag to control the open state of TileSelect Accordion */
+  accordionExpanded: _propTypes.default.bool
 };
 TileSelect.displayName = "TileSelect";
 var _default = TileSelect;

package/lib/components/tile-select/tile-select.d.ts

@@ -38,6 +38,12 @@ export interface TileSelectProps extends MarginProps {
   prefixAdornment?: React.ReactNode;
   /** Component to render additional information row between title and description */
   additionalInformation?: React.ReactNode;
+  /** Components to render in the TileSelect Accordion */
+  accordionContent?: React.ReactNode;
+  /** Callback to toggle expanded state of TileSelect Accordion */
+  accordionControl?: (controlId: string, contentId: string) => JSX.Element;
+  /** Flag to control the open state of TileSelect Accordion */
+  accordionExpanded?: boolean;
 }
 
 declare function TileSelect(props: TileSelectProps): JSX.Element;

package/lib/components/tile-select/tile-select.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledFocusWrapper = exports.StyledFooterWrapper = exports.StyledDeselectWrapper = exports.StyledDescription = exports.StyledAdornment = exports.StyledSubtitle = exports.StyledTitle = exports.StyledTitleContainer = exports.StyledTileSelectInput = exports.StyledTileSelect = exports.StyledTileSelectContainer = exports.StyledGroupDescription = exports.StyledTileSelectFieldset = void 0;
+exports.StyledAccordionFooterWrapper = exports.StyledFocusWrapper = exports.StyledFooterWrapper = exports.StyledDeselectWrapper = exports.StyledDescription = exports.StyledAdornment = exports.StyledSubtitle = exports.StyledTitle = exports.StyledTitleContainer = exports.StyledTileSelectInput = exports.StyledTileSelect = exports.StyledTileSelectContainer = exports.StyledGroupDescription = exports.StyledTileSelectFieldset = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -131,6 +131,22 @@ const StyledFooterWrapper = _styledComponents.default.div`
   z-index: 200;
 `;
 exports.StyledFooterWrapper = StyledFooterWrapper;
+const StyledAccordionFooterWrapper = _styledComponents.default.div`
+  width: fit-content;
+  position: relative;
+  z-index: 200;
+  left: -12px;
+
+  ${({
+  accordionExpanded
+}) => `
+      span[data-element="chevron_down"] {
+        transition: transform 0.3s;
+        ${!accordionExpanded && "transform: rotate(-90deg)"};
+      }
+  `}
+`;
+exports.StyledAccordionFooterWrapper = StyledAccordionFooterWrapper;
 const StyledTileSelectInput = (0, _styledComponents.default)(_input.Input)`
   position: absolute;
   top: 0;

package/lib/locales/en-gb.d.ts

@@ -0,0 +1,5 @@
+import Locale from ".";
+
+declare const EnGb: Locale;
+
+export default EnGb;

package/lib/locales/en-gb.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.isSingular = void 0;
+exports.default = void 0;
 
-const isSingular = count => parseInt(count, 10) === 1;
+const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 
-exports.isSingular = isSingular;
 var _default = {
   locale: () => "en-GB",
   actions: {

package/lib/locales/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./locale";
+export { default as EnGb } from "./en-gb";