carbon-react 116.1.1 → 116.1.3

package/lib/components/detail/detail.component.js

@@ -3,16 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Detail = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
 var _utils = require("../../style/utils");
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
@@ -23,54 +19,189 @@ 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); }
 
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default);
-
 const Detail = ({
   className,
   icon,
   footnote,
   children,
   ...rest
-}) => {
-  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
-  return /*#__PURE__*/_react.default.createElement(_detail.StyledDetail, _extends({
-    className: (0, _classnames.default)("carbon-detail", className),
-    hasIcon: icon
-  }, (0, _tags.default)("detail", rest), marginProps), icon && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailIcon, {
-    type: icon,
-    "data-element": "icon"
-  }), /*#__PURE__*/_react.default.createElement(_detail.StyledDetailContent, {
-    "data-element": "detail-content",
-    hasIcon: icon
-  }, children), footnote && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailFootnote, {
-    "data-element": "footnote",
-    hasIcon: icon
-  }, footnote));
-};
-
-Detail.propTypes = { ...marginPropTypes,
-
-  /**
-   * Custom className
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * <a href="https://carbon.sage.com/?path=/docs/icon--list-of-icons#list-of-icons" target="_blank">List of supported icons</a>
-   *
-   * The type of icon to use.
-   */
-  icon: _propTypes.default.string,
-
-  /**
-   * A small detail to display under the main content.
-   */
-  footnote: _propTypes.default.string,
-
-  /**
-   * The rendered children of the component.
-   */
-  children: _propTypes.default.node
+}) => /*#__PURE__*/_react.default.createElement(_detail.StyledDetail, _extends({
+  className: `carbon-detail ${className}`
+}, (0, _tags.default)("detail", rest), (0, _utils.filterStyledSystemMarginProps)(rest)), icon && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailIcon, {
+  type: icon,
+  "data-element": "icon"
+}), /*#__PURE__*/_react.default.createElement(_detail.StyledDetailContent, {
+  "data-element": "detail-content",
+  hasIcon: !!icon
+}, children), footnote && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailFootnote, {
+  "data-element": "footnote",
+  hasIcon: !!icon
+}, footnote));
+
+exports.Detail = Detail;
+Detail.propTypes = {
+  "children": _propTypes.default.node,
+  "className": _propTypes.default.string,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "footnote": _propTypes.default.string,
+  "icon": _propTypes.default.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])
 };
+Detail.displayName = "Detail";
 var _default = Detail;
 exports.default = _default;

package/lib/components/detail/detail.style.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const StyledDetail: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledDetailContent: import("styled-components").StyledComponent<"div", any, {
+    hasIcon: boolean;
+}, never>;
+declare const StyledDetailIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const StyledDetailFootnote: import("styled-components").StyledComponent<"div", any, {
+    hasIcon: boolean;
+}, never>;
+export { StyledDetail, StyledDetailContent, StyledDetailIcon, StyledDetailFootnote, };

package/lib/components/detail/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./detail";
+export { default } from "./detail.component";
+export type { DetailProps } from "./detail.component";

package/lib/components/drawer/drawer.component.d.ts

@@ -31,7 +31,7 @@ export interface DrawerProps {
     /** Makes the footer of the drawer sticky. Footer prop must also be set. */
     stickyFooter?: boolean;
 }
-declare const DrawerSidebarContext: React.Context<{}>;
+declare const DrawerSidebarContext: React.Context<Partial<DrawerSidebarContextProps>>;
 export declare const Drawer: ({ defaultExpanded, expanded, onChange, children, expandedWidth, sidebar, animationDuration, backgroundColor, title, footer, showControls, height, stickyHeader, stickyFooter, ...rest }: DrawerProps) => JSX.Element;
 export { DrawerSidebarContext };
 export default Drawer;

package/lib/components/icon/icon.component.js

@@ -23,7 +23,7 @@ var _icon = _interopRequireDefault(require("./icon.style"));
 
 var _iconConfig = require("./icon-config");
 
-var _tabTitle = require("../tabs/__internal__/tab-title/tab-title.component");
+var _tabTitle = require("../tabs/__internal__/tab-title");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/components/menu/index.d.ts

@@ -3,3 +3,4 @@ export { default as MenuItem } from "./menu-item/menu-item";
 export { default as ScrollableBlock } from "./scrollable-block/scrollable-block";
 export { default as MenuDivider } from "./menu-divider/menu-divider";
 export { default as MenuSegmentTitle } from "./menu-segment-title/menu-segment-title";
+export { default as MenuFullscreen } from "./menu-full-screen/menu-full-screen";

package/lib/components/tabs/__internal__/tab-title/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./tab-title";
+export { default, TabTitleContext } from "./tab-title.component";
+export type { TabTitleProps } from "./tab-title.component";

package/lib/components/tabs/__internal__/tab-title/index.js

@@ -9,7 +9,15 @@ Object.defineProperty(exports, "default", {
     return _tabTitle.default;
   }
 });
+Object.defineProperty(exports, "TabTitleContext", {
+  enumerable: true,
+  get: function () {
+    return _tabTitle.TabTitleContext;
+  }
+});
+
+var _tabTitle = _interopRequireWildcard(require("./tab-title.component"));
 
-var _tabTitle = _interopRequireDefault(require("./tab-title.component"));
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }

package/lib/components/tabs/__internal__/tab-title/tab-title.component.d.ts

@@ -1,4 +1,38 @@
-export const TabTitleContext: React.Context<{}>;
-export default TabTitle;
 import React from "react";
-declare const TabTitle: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+interface TabTitleContextProps {
+    isInTab?: boolean;
+}
+export interface TabTitleProps {
+    /** Identifier used for testing purposes */
+    "data-role"?: string;
+    title?: string;
+    id?: string;
+    dataTabId?: string;
+    className?: string;
+    children?: React.ReactNode;
+    isTabSelected?: boolean;
+    position?: "top" | "left";
+    errorMessage?: string;
+    warningMessage?: string;
+    infoMessage?: string;
+    error?: boolean;
+    warning?: boolean;
+    info?: boolean;
+    borders?: boolean;
+    noLeftBorder?: boolean;
+    noRightBorder?: boolean;
+    alternateStyling?: boolean;
+    isInSidebar?: boolean;
+    siblings?: React.ReactNode;
+    titlePosition?: "before" | "after";
+    href?: string;
+    tabIndex?: number;
+    size?: "default" | "large";
+    align?: "left" | "right";
+    customLayout?: React.ReactNode;
+    onClick: (ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    onKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+}
+export declare const TabTitleContext: React.Context<TabTitleContextProps>;
+declare const TabTitle: React.ForwardRefExoticComponent<TabTitleProps & React.RefAttributes<HTMLElement>>;
+export default TabTitle;

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

@@ -15,8 +15,6 @@ var _tags = _interopRequireDefault(require("../../../../__internal__/utils/helpe
 
 var _validationIcon = _interopRequireDefault(require("../../../../__internal__/validations/validation-icon.component"));
 
-var _guid = _interopRequireDefault(require("../../../../__internal__/utils/helpers/guid"));
-
 var _icon = _interopRequireDefault(require("../../../icon"));
 
 var _events = _interopRequireDefault(require("../../../../__internal__/utils/helpers/events"));
@@ -40,7 +38,7 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
   dataTabId,
   "data-role": dataRole,
   title,
-  position = "top",
+  position,
   error,
   warning,
   info,
@@ -51,7 +49,7 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
   errorMessage = "",
   warningMessage = "",
   infoMessage = "",
-  borders = false,
+  borders,
   alternateStyling = false,
   noLeftBorder = false,
   noRightBorder = false,
@@ -60,9 +58,9 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
   href,
   onKeyDown,
   align,
+  tabIndex,
   ...tabTitleProps
 }, ref) => {
-  const keys = (0, _react.useRef)([]);
   const isHref = !!href;
   const hasAlternateStyling = alternateStyling || isInSidebar;
   const hasFailedValidation = error || warning || info;
@@ -74,15 +72,11 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
   };
 
   const hideTooltip = () => {
-    if ((ref === null || ref === void 0 ? void 0 : ref.current) !== document.activeElement && !hasHover.current) {
+    if (typeof ref === "object" && (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((0, _guid.default)()));
-  }
-
   const handleKeyDown = ev => {
     ev.stopPropagation();
 
@@ -94,8 +88,6 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
   };
 
   const handleClick = ev => {
-    var _ref$current;
-
     ev.preventDefault();
     const customEvent = { ...ev,
       target: { ...ev.target,
@@ -109,9 +101,15 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
       onClick(customEvent);
       return window.open(href, "_blank");
     } // safari does not focus buttons by default
+    // istanbul ignore else (ref is always passed as an object from Tabs component, if was only added to satisfy Typescript compiler)
+
+
+    if (typeof ref === "object") {
+      var _ref$current;
 
+      ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+    }
 
-    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     return onClick(customEvent);
   };
 
@@ -133,59 +131,21 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     const titleSiblings = /*#__PURE__*/_react.default.createElement(_tabTitle.StyledLayoutWrapper, {
       titlePosition: titlePosition,
       key: "title-siblings"
-    }, siblings.map((child, index) => {
-      const key = child.props.key || keys.current[index];
+    }, _react.default.Children.toArray(siblings).map(child => {
+      // istanbul ignore next
+      if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+        return child;
+      }
+
       return /*#__PURE__*/_react.default.cloneElement(child, { ...child.props,
-        onClick: handleClick,
-        key
+        onClick: handleClick
       });
     }));
 
     return titlePosition === "before" ? [titleText, titleSiblings] : [titleSiblings, titleText];
   };
 
-  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
-    tooltipVisible: shouldShowTooltip
-  }, /*#__PURE__*/_react.default.createElement(TabTitleContext.Provider, {
-    value: {
-      isInTab: true
-    }
-  }, /*#__PURE__*/_react.default.createElement(_tabTitle.StyledTabTitle, _extends({
-    ref: ref,
-    "aria-selected": isTabSelected,
-    "data-element": "select-tab",
-    "data-tabid": dataTabId,
-    "data-role": dataRole,
-    role: "tab",
-    position: position,
-    isTabSelected: isTabSelected,
-    error: error,
-    warning: warning,
-    info: info,
-    noRightBorder: noRightBorder,
-    noLeftBorder: noLeftBorder,
-    alternateStyling: alternateStyling || isInSidebar,
-    borders: borders,
-    isInSidebar: isInSidebar
-  }, tabTitleProps, isHref && {
-    href,
-    target: "_blank",
-    as: "a"
-  }, (0, _tags.default)("tab-header", tabTitleProps), {
-    onKeyDown: handleKeyDown,
-    onClick: handleClick,
-    size: size,
-    onMouseOver: () => {
-      hasHover.current = true;
-      showTooltip();
-    },
-    onMouseLeave: () => {
-      hasHover.current = false;
-      hideTooltip();
-    },
-    onFocus: showTooltip,
-    onBlur: hideTooltip
-  }), /*#__PURE__*/_react.default.createElement(_tabTitle.StyledTitleContent, {
+  const titleChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tabTitle.StyledTitleContent, {
     error: error,
     warning: warning,
     info: info,
@@ -206,56 +166,98 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     position: position,
     hasCustomSibling: !!customLayout
   }, error && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
-    onClick: handleClick,
     tooltipPosition: "top",
-    error: errorMessage,
-    tabIndex: null
+    error: errorMessage
   }), !error && warning && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
-    onClick: handleClick,
     tooltipPosition: "top",
-    warning: warningMessage,
-    tabIndex: null
+    warning: warningMessage
   }), !warning && !error && info && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
-    onClick: handleClick,
     tooltipPosition: "top",
-    info: infoMessage,
-    tabIndex: null
+    info: infoMessage
   }))), !(hasFailedValidation || hasAlternateStyling) && isTabSelected && /*#__PURE__*/_react.default.createElement(_tabTitle.StyledSelectedIndicator, {
     "data-element": "tab-selected-indicator",
     position: position
-  }))));
+  }));
+
+  const titleWrapperProps = {
+    "aria-selected": isTabSelected,
+    "data-element": "select-tab",
+    "data-tabid": dataTabId,
+    "data-role": dataRole,
+    role: "tab",
+    position,
+    isTabSelected,
+    error,
+    warning,
+    info,
+    noRightBorder,
+    noLeftBorder,
+    alternateStyling: alternateStyling || isInSidebar,
+    borders,
+    isInSidebar,
+    tabIndex,
+    ...tabTitleProps,
+    ...(0, _tags.default)("tab-header", tabTitleProps),
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    size,
+    onMouseOver: () => {
+      hasHover.current = true;
+      showTooltip();
+    },
+    onMouseLeave: () => {
+      hasHover.current = false;
+      hideTooltip();
+    },
+    onFocus: showTooltip,
+    onBlur: hideTooltip
+  };
+  const tabTitle = isHref ? /*#__PURE__*/_react.default.createElement(_tabTitle.StyledTabTitleLink, _extends({}, titleWrapperProps, {
+    ref: ref,
+    href: href,
+    target: "_blank"
+  }), titleChildren) : /*#__PURE__*/_react.default.createElement(_tabTitle.StyledTabTitleButton, _extends({}, titleWrapperProps, {
+    ref: ref
+  }), titleChildren);
+  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    tooltipVisible: shouldShowTooltip
+  }, /*#__PURE__*/_react.default.createElement(TabTitleContext.Provider, {
+    value: {
+      isInTab: true
+    }
+  }, tabTitle));
 });
 
 TabTitle.propTypes = {
-  title: _propTypes.default.string.isRequired,
-  isTabSelected: _propTypes.default.bool,
-  position: _propTypes.default.oneOf(["top", "left"]),
-  className: _propTypes.default.string,
-
-  /** Identifier used for testing purposes */
+  "align": _propTypes.default.oneOf(["left", "right"]),
+  "alternateStyling": _propTypes.default.bool,
+  "borders": _propTypes.default.bool,
+  "children": _propTypes.default.node,
+  "className": _propTypes.default.string,
+  "customLayout": _propTypes.default.node,
   "data-role": _propTypes.default.string,
-  dataTabId: _propTypes.default.string,
-  id: _propTypes.default.string,
-  onClick: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-  tabIndex: _propTypes.default.string,
-  error: _propTypes.default.bool,
-  warning: _propTypes.default.bool,
-  info: _propTypes.default.bool,
-  size: _propTypes.default.oneOf(["default", "large"]),
-  titlePosition: _propTypes.default.oneOf(["before", "after"]),
-  errorMessage: _propTypes.default.string,
-  warningMessage: _propTypes.default.string,
-  infoMessage: _propTypes.default.string,
-  siblings: _propTypes.default.arrayOf(_propTypes.default.node),
-  borders: _propTypes.default.bool,
-  alternateStyling: _propTypes.default.bool,
-  noLeftBorder: _propTypes.default.bool,
-  noRightBorder: _propTypes.default.bool,
-  customLayout: _propTypes.default.node,
-  isInSidebar: _propTypes.default.bool,
-  href: _propTypes.default.string,
-  align: _propTypes.default.oneOf(["left", "right"])
+  "dataTabId": _propTypes.default.string,
+  "error": _propTypes.default.bool,
+  "errorMessage": _propTypes.default.string,
+  "href": _propTypes.default.string,
+  "id": _propTypes.default.string,
+  "info": _propTypes.default.bool,
+  "infoMessage": _propTypes.default.string,
+  "isInSidebar": _propTypes.default.bool,
+  "isTabSelected": _propTypes.default.bool,
+  "noLeftBorder": _propTypes.default.bool,
+  "noRightBorder": _propTypes.default.bool,
+  "onClick": _propTypes.default.func.isRequired,
+  "onKeyDown": _propTypes.default.func.isRequired,
+  "position": _propTypes.default.oneOf(["left", "top"]),
+  "siblings": _propTypes.default.node,
+  "size": _propTypes.default.oneOf(["default", "large"]),
+  "tabIndex": _propTypes.default.number,
+  "title": _propTypes.default.string,
+  "titlePosition": _propTypes.default.oneOf(["after", "before"]),
+  "warning": _propTypes.default.bool,
+  "warningMessage": _propTypes.default.string
 };
+TabTitle.displayName = "TabTitle";
 var _default = TabTitle;
 exports.default = _default;