carbon-react 114.8.0 → 114.9.0

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

@@ -13,6 +13,7 @@ export const TabTitleContext = /*#__PURE__*/React.createContext({});
 const TabTitle = /*#__PURE__*/React.forwardRef(({
   isTabSelected,
   dataTabId,
+  "data-role": dataRole,
   title,
   position = "top",
   error,
@@ -127,6 +128,7 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     "aria-selected": isTabSelected,
     "data-element": "select-tab",
     "data-tabid": dataTabId,
+    "data-role": dataRole,
     role: "tab",
     position: position,
     isTabSelected: isTabSelected,
@@ -201,6 +203,9 @@ TabTitle.propTypes = {
   isTabSelected: PropTypes.bool,
   position: PropTypes.oneOf(["top", "left"]),
   className: PropTypes.string,
+
+  /** Identifier used for testing purposes */
+  "data-role": PropTypes.string,
   dataTabId: PropTypes.string,
   id: PropTypes.string,
   onClick: PropTypes.func,

package/esm/components/tabs/__internal__/tab-title/tab-title.d.ts

@@ -5,6 +5,8 @@ export interface TabTitleContextProps {
 }
 
 export interface TabTitleProps {
+  /** Identifier used for testing purposes */
+  "data-role"?: string;
   title: string;
   id?: string;
   dataTabId?: string;

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

@@ -22,6 +22,7 @@ const Tab = ({
   updateInfos,
   href,
   title,
+  titleProps,
   ...rest
 }) => {
   const [tabErrors, setTabErrors] = useState({});
@@ -124,7 +125,13 @@ Tab.propTypes = { ...paddingPropTypes,
   titlePosition: PropTypes.oneOf(["before", "after"]),
 
   /** Allows Tab to be a link */
-  href: PropTypes.string
+  href: PropTypes.string,
+
+  /** Additional props to be passed to the Tab's corresponding title */
+  titleProps: PropTypes.shape({
+    /** Identifier used for testing purposes */
+    "data-role": PropTypes.string
+  })
 };
 export { TabContext };
 export default Tab;

package/esm/components/tabs/tab/tab.d.ts

@@ -32,6 +32,11 @@ export interface TabProps extends PaddingProps {
   href?: string;
   /** Overrides default layout with a one defined in this prop */
   customLayout?: React.ReactNode;
+  /** Additional props to be passed to the Tab's corresponding title. */
+  titleProps?: {
+    /** Identifier used for testing purposes */
+    "data-role"?: string;
+  };
 }
 
 export interface TabAllProps {

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

@@ -170,7 +170,8 @@ const Tabs = ({
         warningMessage,
         infoMessage,
         href,
-        customLayout
+        customLayout,
+        titleProps
       } = child.props;
       const refId = `${tabId}-tab`;
       const errors = tabsErrors[tabId];
@@ -201,7 +202,7 @@ const Tabs = ({
         return summaryOfMessages.map(value => `• ${value}`).join("\n");
       };
 
-      const tabTitle = /*#__PURE__*/React.createElement(TabTitle, {
+      return /*#__PURE__*/React.createElement(TabTitle, _extends({}, titleProps, {
         position: isInSidebar ? "left" : position,
         className: child.props.className || "",
         dataTabId: tabId,
@@ -230,8 +231,7 @@ const Tabs = ({
         customLayout: customLayout,
         isInSidebar: isInSidebar,
         align: align
-      });
-      return tabTitle;
+      }));
     });
     return /*#__PURE__*/React.createElement(TabsHeader, {
       align: align,
@@ -243,22 +243,6 @@ const Tabs = ({
       isInSidebar: isInSidebar
     }, tabTitles);
   };
-  /** Builds the single currently selected tab */
-
-
-  const visibleTab = () => {
-    const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
-    return tab && /*#__PURE__*/cloneElement(tab, { ...tab.props,
-      role: "tabpanel",
-      position,
-      isTabSelected: isTabSelected(tab.props.tabId),
-      key: `${tab.props.tabId}-tab`,
-      ariaLabelledby: `${tab.props.tabId}-tab`,
-      updateErrors,
-      updateWarnings,
-      updateInfos
-    });
-  };
   /** Builds all tabs where non selected tabs have class of hidden */
 
 
@@ -266,10 +250,20 @@ const Tabs = ({
     if (isInSidebar) return null;
 
     if (!renderHiddenTabs) {
-      return visibleTab();
+      const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
+      return tab && /*#__PURE__*/cloneElement(tab, { ...tab.props,
+        role: "tabpanel",
+        position,
+        isTabSelected: isTabSelected(tab.props.tabId),
+        key: `${tab.props.tabId}-tab`,
+        ariaLabelledby: `${tab.props.tabId}-tab`,
+        updateErrors,
+        updateWarnings,
+        updateInfos
+      });
     }
 
-    const tabs = filteredChildren.map(child => {
+    return filteredChildren.map(child => {
       return /*#__PURE__*/cloneElement(child, { ...child.props,
         role: "tabpanel",
         position,
@@ -281,7 +275,6 @@ const Tabs = ({
         updateInfos
       });
     });
-    return tabs;
   };
 
   return /*#__PURE__*/React.createElement(StyledTabs, _extends({

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

@@ -38,6 +38,7 @@ exports.TabTitleContext = TabTitleContext;
 const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
   isTabSelected,
   dataTabId,
+  "data-role": dataRole,
   title,
   position = "top",
   error,
@@ -154,6 +155,7 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     "aria-selected": isTabSelected,
     "data-element": "select-tab",
     "data-tabid": dataTabId,
+    "data-role": dataRole,
     role: "tab",
     position: position,
     isTabSelected: isTabSelected,
@@ -229,6 +231,9 @@ TabTitle.propTypes = {
   isTabSelected: _propTypes.default.bool,
   position: _propTypes.default.oneOf(["top", "left"]),
   className: _propTypes.default.string,
+
+  /** Identifier used for testing purposes */
+  "data-role": _propTypes.default.string,
   dataTabId: _propTypes.default.string,
   id: _propTypes.default.string,
   onClick: _propTypes.default.func,

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

@@ -5,6 +5,8 @@ export interface TabTitleContextProps {
 }
 
 export interface TabTitleProps {
+  /** Identifier used for testing purposes */
+  "data-role"?: string;
   title: string;
   id?: string;
   dataTabId?: string;

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

@@ -43,6 +43,7 @@ const Tab = ({
   updateInfos,
   href,
   title,
+  titleProps,
   ...rest
 }) => {
   const [tabErrors, setTabErrors] = (0, _react.useState)({});
@@ -145,7 +146,13 @@ Tab.propTypes = { ...paddingPropTypes,
   titlePosition: _propTypes.default.oneOf(["before", "after"]),
 
   /** Allows Tab to be a link */
-  href: _propTypes.default.string
+  href: _propTypes.default.string,
+
+  /** Additional props to be passed to the Tab's corresponding title */
+  titleProps: _propTypes.default.shape({
+    /** Identifier used for testing purposes */
+    "data-role": _propTypes.default.string
+  })
 };
 var _default = Tab;
 exports.default = _default;

package/lib/components/tabs/tab/tab.d.ts

@@ -32,6 +32,11 @@ export interface TabProps extends PaddingProps {
   href?: string;
   /** Overrides default layout with a one defined in this prop */
   customLayout?: React.ReactNode;
+  /** Additional props to be passed to the Tab's corresponding title. */
+  titleProps?: {
+    /** Identifier used for testing purposes */
+    "data-role"?: string;
+  };
 }
 
 export interface TabAllProps {

package/lib/components/tabs/tabs.component.js

@@ -204,7 +204,8 @@ const Tabs = ({
         warningMessage,
         infoMessage,
         href,
-        customLayout
+        customLayout,
+        titleProps
       } = child.props;
       const refId = `${tabId}-tab`;
       const errors = tabsErrors[tabId];
@@ -235,7 +236,7 @@ const Tabs = ({
         return summaryOfMessages.map(value => `• ${value}`).join("\n");
       };
 
-      const tabTitle = /*#__PURE__*/_react.default.createElement(_tabTitle.default, {
+      return /*#__PURE__*/_react.default.createElement(_tabTitle.default, _extends({}, titleProps, {
         position: isInSidebar ? "left" : position,
         className: child.props.className || "",
         dataTabId: tabId,
@@ -264,9 +265,7 @@ const Tabs = ({
         customLayout: customLayout,
         isInSidebar: isInSidebar,
         align: align
-      });
-
-      return tabTitle;
+      }));
     });
     return /*#__PURE__*/_react.default.createElement(_tabsHeader.default, {
       align: align,
@@ -278,22 +277,6 @@ const Tabs = ({
       isInSidebar: isInSidebar
     }, tabTitles);
   };
-  /** Builds the single currently selected tab */
-
-
-  const visibleTab = () => {
-    const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
-    return tab && /*#__PURE__*/(0, _react.cloneElement)(tab, { ...tab.props,
-      role: "tabpanel",
-      position,
-      isTabSelected: isTabSelected(tab.props.tabId),
-      key: `${tab.props.tabId}-tab`,
-      ariaLabelledby: `${tab.props.tabId}-tab`,
-      updateErrors,
-      updateWarnings,
-      updateInfos
-    });
-  };
   /** Builds all tabs where non selected tabs have class of hidden */
 
 
@@ -301,10 +284,20 @@ const Tabs = ({
     if (isInSidebar) return null;
 
     if (!renderHiddenTabs) {
-      return visibleTab();
+      const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
+      return tab && /*#__PURE__*/(0, _react.cloneElement)(tab, { ...tab.props,
+        role: "tabpanel",
+        position,
+        isTabSelected: isTabSelected(tab.props.tabId),
+        key: `${tab.props.tabId}-tab`,
+        ariaLabelledby: `${tab.props.tabId}-tab`,
+        updateErrors,
+        updateWarnings,
+        updateInfos
+      });
     }
 
-    const tabs = filteredChildren.map(child => {
+    return filteredChildren.map(child => {
       return /*#__PURE__*/(0, _react.cloneElement)(child, { ...child.props,
         role: "tabpanel",
         position,
@@ -316,7 +309,6 @@ const Tabs = ({
         updateInfos
       });
     });
-    return tabs;
   };
 
   return /*#__PURE__*/_react.default.createElement(_tabs.default, _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.8.0",
+  "version": "114.9.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",