carbon-react 116.1.1 → 116.1.3

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

@@ -2,10 +2,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { StyledTabTitle, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator } from "./tab-title.style";
+import { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator } from "./tab-title.style";
 import tagComponent from "../../../../__internal__/utils/helpers/tags/tags";
 import ValidationIcon from "../../../../__internal__/validations/validation-icon.component";
-import createGuid from "../../../../__internal__/utils/helpers/guid";
 import Icon from "../../../icon";
 import Events from "../../../../__internal__/utils/helpers/events";
 import { TooltipProvider } from "../../../../__internal__/tooltip-provider";
@@ -15,7 +14,7 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
   dataTabId,
   "data-role": dataRole,
   title,
-  position = "top",
+  position,
   error,
   warning,
   info,
@@ -26,7 +25,7 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
   errorMessage = "",
   warningMessage = "",
   infoMessage = "",
-  borders = false,
+  borders,
   alternateStyling = false,
   noLeftBorder = false,
   noRightBorder = false,
@@ -35,9 +34,9 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
   href,
   onKeyDown,
   align,
+  tabIndex,
   ...tabTitleProps
 }, ref) => {
-  const keys = useRef([]);
   const isHref = !!href;
   const hasAlternateStyling = alternateStyling || isInSidebar;
   const hasFailedValidation = error || warning || info;
@@ -49,15 +48,11 @@ const TabTitle = /*#__PURE__*/React.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(createGuid()));
-  }
-
   const handleKeyDown = ev => {
     ev.stopPropagation();
 
@@ -69,8 +64,6 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
   };
 
   const handleClick = ev => {
-    var _ref$current;
-
     ev.preventDefault();
     const customEvent = { ...ev,
       target: { ...ev.target,
@@ -84,9 +77,15 @@ const TabTitle = /*#__PURE__*/React.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);
   };
 
@@ -107,58 +106,20 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     const titleSiblings = /*#__PURE__*/React.createElement(StyledLayoutWrapper, {
       titlePosition: titlePosition,
       key: "title-siblings"
-    }, siblings.map((child, index) => {
-      const key = child.props.key || keys.current[index];
+    }, React.Children.toArray(siblings).map(child => {
+      // istanbul ignore next
+      if (! /*#__PURE__*/React.isValidElement(child)) {
+        return child;
+      }
+
       return /*#__PURE__*/React.cloneElement(child, { ...child.props,
-        onClick: handleClick,
-        key
+        onClick: handleClick
       });
     }));
     return titlePosition === "before" ? [titleText, titleSiblings] : [titleSiblings, titleText];
   };
 
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
-    tooltipVisible: shouldShowTooltip
-  }, /*#__PURE__*/React.createElement(TabTitleContext.Provider, {
-    value: {
-      isInTab: true
-    }
-  }, /*#__PURE__*/React.createElement(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"
-  }, tagComponent("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.createElement(StyledTitleContent, {
+  const titleChildren = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTitleContent, {
     error: error,
     warning: warning,
     info: info,
@@ -179,54 +140,95 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     position: position,
     hasCustomSibling: !!customLayout
   }, error && /*#__PURE__*/React.createElement(ValidationIcon, {
-    onClick: handleClick,
     tooltipPosition: "top",
-    error: errorMessage,
-    tabIndex: null
+    error: errorMessage
   }), !error && warning && /*#__PURE__*/React.createElement(ValidationIcon, {
-    onClick: handleClick,
     tooltipPosition: "top",
-    warning: warningMessage,
-    tabIndex: null
+    warning: warningMessage
   }), !warning && !error && info && /*#__PURE__*/React.createElement(ValidationIcon, {
-    onClick: handleClick,
     tooltipPosition: "top",
-    info: infoMessage,
-    tabIndex: null
+    info: infoMessage
   }))), !(hasFailedValidation || hasAlternateStyling) && isTabSelected && /*#__PURE__*/React.createElement(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,
+    ...tagComponent("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.createElement(StyledTabTitleLink, _extends({}, titleWrapperProps, {
+    ref: ref,
+    href: href,
+    target: "_blank"
+  }), titleChildren) : /*#__PURE__*/React.createElement(StyledTabTitleButton, _extends({}, titleWrapperProps, {
+    ref: ref
+  }), titleChildren);
+  return /*#__PURE__*/React.createElement(TooltipProvider, {
+    tooltipVisible: shouldShowTooltip
+  }, /*#__PURE__*/React.createElement(TabTitleContext.Provider, {
+    value: {
+      isInTab: true
+    }
+  }, tabTitle));
 });
 TabTitle.propTypes = {
-  title: PropTypes.string.isRequired,
-  isTabSelected: PropTypes.bool,
-  position: PropTypes.oneOf(["top", "left"]),
-  className: PropTypes.string,
-
-  /** Identifier used for testing purposes */
+  "align": PropTypes.oneOf(["left", "right"]),
+  "alternateStyling": PropTypes.bool,
+  "borders": PropTypes.bool,
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "customLayout": PropTypes.node,
   "data-role": PropTypes.string,
-  dataTabId: PropTypes.string,
-  id: PropTypes.string,
-  onClick: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  tabIndex: PropTypes.string,
-  error: PropTypes.bool,
-  warning: PropTypes.bool,
-  info: PropTypes.bool,
-  size: PropTypes.oneOf(["default", "large"]),
-  titlePosition: PropTypes.oneOf(["before", "after"]),
-  errorMessage: PropTypes.string,
-  warningMessage: PropTypes.string,
-  infoMessage: PropTypes.string,
-  siblings: PropTypes.arrayOf(PropTypes.node),
-  borders: PropTypes.bool,
-  alternateStyling: PropTypes.bool,
-  noLeftBorder: PropTypes.bool,
-  noRightBorder: PropTypes.bool,
-  customLayout: PropTypes.node,
-  isInSidebar: PropTypes.bool,
-  href: PropTypes.string,
-  align: PropTypes.oneOf(["left", "right"])
+  "dataTabId": PropTypes.string,
+  "error": PropTypes.bool,
+  "errorMessage": PropTypes.string,
+  "href": PropTypes.string,
+  "id": PropTypes.string,
+  "info": PropTypes.bool,
+  "infoMessage": PropTypes.string,
+  "isInSidebar": PropTypes.bool,
+  "isTabSelected": PropTypes.bool,
+  "noLeftBorder": PropTypes.bool,
+  "noRightBorder": PropTypes.bool,
+  "onClick": PropTypes.func.isRequired,
+  "onKeyDown": PropTypes.func.isRequired,
+  "position": PropTypes.oneOf(["left", "top"]),
+  "siblings": PropTypes.node,
+  "size": PropTypes.oneOf(["default", "large"]),
+  "tabIndex": PropTypes.number,
+  "title": PropTypes.string,
+  "titlePosition": PropTypes.oneOf(["after", "before"]),
+  "warning": PropTypes.bool,
+  "warningMessage": PropTypes.string
 };
+TabTitle.displayName = "TabTitle";
 export default TabTitle;

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

@@ -1,4 +1,18 @@
-export const StyledTabTitle: import("styled-components").StyledComponent<"button", any, {}, never>;
-export const StyledTitleContent: import("styled-components").StyledComponent<"span", any, {}, never>;
-export const StyledLayoutWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledSelectedIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { TabTitleProps } from ".";
+interface StyledTitleContentProps extends Pick<TabTitleProps, "align" | "borders" | "error" | "info" | "isTabSelected" | "noLeftBorder" | "noRightBorder" | "position" | "size" | "warning"> {
+    alternateStyling?: boolean;
+    hasCustomLayout?: boolean;
+    hasHref?: boolean;
+    hasSiblings?: boolean;
+}
+declare const StyledTitleContent: import("styled-components").StyledComponent<"span", any, StyledTitleContentProps, never>;
+declare const StyledTabTitleButton: import("styled-components").StyledComponent<"button", any, TabTitleProps, never>;
+declare const StyledTabTitleLink: import("styled-components").StyledComponent<"a", any, TabTitleProps, never>;
+interface StyledLayoutWrapperProps extends Pick<TabTitleProps, "titlePosition" | "position"> {
+    hasCustomLayout?: boolean;
+    hasCustomSibling?: boolean;
+}
+declare const StyledLayoutWrapper: import("styled-components").StyledComponent<"div", any, StyledLayoutWrapperProps, never>;
+declare type StyledSelectedIndicatorProps = Pick<TabTitleProps, "position">;
+declare const StyledSelectedIndicator: import("styled-components").StyledComponent<"div", any, StyledSelectedIndicatorProps, never>;
+export { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator, };

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

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import StyledIcon from "../../../icon/icon.style";
 import StyledValidationIcon from "../../../../__internal__/validations/validation-icon.style";
 const StyledTitleContent = styled.span`
@@ -16,8 +15,8 @@ const StyledTitleContent = styled.span`
   size,
   isTabSelected,
   hasSiblings,
-  borders,
-  position,
+  borders = false,
+  position = "top",
   noLeftBorder,
   noRightBorder,
   hasHref,
@@ -206,7 +205,7 @@ const StyledTitleContent = styled.span`
     `}
   `}
 `;
-const StyledTabTitle = styled.button`
+const tabTitleStyles = css`
   background-color: transparent;
   display: inline-block;
   font-weight: bold;
@@ -225,8 +224,8 @@ const StyledTabTitle = styled.button`
 
   ${({
   size,
-  position,
-  borders,
+  position = "top",
+  borders = false,
   noRightBorder,
   noLeftBorder,
   isTabSelected,
@@ -373,10 +372,16 @@ const StyledTabTitle = styled.button`
     `}
   `}
 `;
+const StyledTabTitleButton = styled.button`
+  ${tabTitleStyles}
+`;
+const StyledTabTitleLink = styled.a`
+  ${tabTitleStyles}
+`;
 const StyledLayoutWrapper = styled.div`
   ${({
   hasCustomLayout,
-  titlePosition,
+  titlePosition = "before",
   hasCustomSibling,
   position
 }) => css`
@@ -417,7 +422,7 @@ const StyledSelectedIndicator = styled.div`
   z-index: 1;
 
   ${({
-  position
+  position = "top"
 }) => css`
     ${position === "top" && css`
       bottom: 0px;
@@ -438,45 +443,4 @@ const StyledSelectedIndicator = styled.div`
     `}
   `}
 `;
-StyledTabTitle.propTypes = {
-  position: PropTypes.oneOf(["top", "left"]),
-  size: PropTypes.oneOf(["default", "large"]),
-  borders: PropTypes.bool
-};
-StyledTabTitle.defaultProps = {
-  position: "top",
-  size: "default",
-  borders: false
-};
-StyledLayoutWrapper.propTypes = {
-  hasCustomLayout: PropTypes.bool,
-  titlePosition: PropTypes.oneOf(["before", "after"])
-};
-StyledLayoutWrapper.defaultProps = {
-  titlePosition: "before"
-};
-StyledTitleContent.propTypes = {
-  position: PropTypes.oneOf(["top", "left"]),
-  size: PropTypes.oneOf(["default", "large"]),
-  borders: PropTypes.bool,
-  error: PropTypes.bool,
-  warning: PropTypes.bool,
-  info: PropTypes.bool,
-  noLeftBorder: PropTypes.bool,
-  noRightBorder: PropTypes.bool,
-  hasSiblings: PropTypes.bool
-};
-StyledTitleContent.defaultProps = {
-  position: "top",
-  size: "default",
-  borders: false
-};
-StyledSelectedIndicator.propTypes = {
-  position: PropTypes.oneOf(["top", "left"]),
-  size: PropTypes.oneOf(["default", "large"])
-};
-StyledSelectedIndicator.defaultProps = {
-  position: "top",
-  size: "default"
-};
-export { StyledTabTitle, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator };
+export { StyledTabTitleButton, StyledTabTitleLink, StyledTitleContent, StyledLayoutWrapper, StyledSelectedIndicator };

package/esm/components/tabs/__internal__/tabs-header/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./tab-header";
+export { default } from "./tabs-header.component";
+export type { TabHeaderProps } from "./tabs-header.component";

package/esm/components/tabs/__internal__/tabs-header/tabs-header.component.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface TabHeaderProps {
+    role?: string;
+    position?: "top" | "left";
+    extendedLine?: boolean;
+    noRightBorder?: boolean;
+    alternateStyling?: boolean;
+    isInSidebar?: boolean;
+    children: React.ReactNode;
+    align?: "left" | "right";
+}
+declare const TabsHeader: ({ align, children, position, role, extendedLine, alternateStyling, noRightBorder, isInSidebar, }: TabHeaderProps) => JSX.Element;
+export default TabsHeader;

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

@@ -27,13 +27,13 @@ const TabsHeader = ({
 };
 
 TabsHeader.propTypes = {
-  align: PropTypes.oneOf(["left", "right"]),
-  children: PropTypes.node.isRequired,
-  position: PropTypes.oneOf(["top", "left"]),
-  role: PropTypes.string,
-  extendedLine: PropTypes.bool,
-  alternateStyling: PropTypes.bool,
-  noRightBorder: PropTypes.bool,
-  isInSidebar: PropTypes.bool
+  "align": PropTypes.oneOf(["left", "right"]),
+  "alternateStyling": PropTypes.bool,
+  "children": PropTypes.node,
+  "extendedLine": PropTypes.bool,
+  "isInSidebar": PropTypes.bool,
+  "noRightBorder": PropTypes.bool,
+  "position": PropTypes.oneOf(["left", "top"]),
+  "role": PropTypes.string
 };
 export default TabsHeader;

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.d.ts

@@ -1,6 +1,6 @@
-export const StyledTabsHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledTabsHeaderList: import("styled-components").StyledComponent<"div", any, {
-    alternateStyling: any;
-    isInSidebar: any;
-    position: any;
-}, never>;
+import { TabHeaderProps } from "./tabs-header.component";
+declare type StyledTabsHeaderWrapperProps = Pick<TabHeaderProps, "position" | "isInSidebar">;
+declare const StyledTabsHeaderWrapper: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderWrapperProps, never>;
+export declare type StyledTabsHeaderListProps = Pick<TabHeaderProps, "align" | "alternateStyling" | "extendedLine" | "noRightBorder" | "isInSidebar" | "position">;
+declare const StyledTabsHeaderList: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderListProps, never>;
+export { StyledTabsHeaderWrapper, StyledTabsHeaderList };

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

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 
 const computeLineWidth = ({
   alternateStyling,
@@ -37,7 +36,7 @@ const StyledTabsHeaderList = styled.div`
   display: flex;
   box-shadow: inset 0px ${computeLineWidth} 0px 0px var(--colorsActionMinor100);
   ${({
-  extendedLine
+  extendedLine = true
 }) => !extendedLine && css`
       width: fit-content;
     `}
@@ -47,15 +46,16 @@ const StyledTabsHeaderList = styled.div`
   padding: 0;
 
   ${({
-  align
+  align = "left"
 }) => align === "right" && css`
       justify-content: flex-end;
       text-align: right;
     `}
 
   ${({
-  position,
-  noRightBorder
+  position = "top",
+  noRightBorder,
+  align = "left"
 }) => position === "left" && css`
       flex-direction: column;
       box-shadow: none;
@@ -64,28 +64,9 @@ const StyledTabsHeaderList = styled.div`
         box-shadow: none;
       `}
 
-      ${({
-  align
-}) => align === "right" && css`
-          justify-content: flex-start;
-        `}
+      ${align === "right" && css`
+        justify-content: flex-start;
+      `}
     `}
 `;
-StyledTabsHeaderWrapper.defaultProps = {
-  position: "top"
-};
-StyledTabsHeaderWrapper.propTypes = {
-  position: PropTypes.oneOf(["top", "left"]),
-  isInSidebar: PropTypes.bool
-};
-StyledTabsHeaderList.defaultProps = {
-  align: "left",
-  position: "top",
-  extendedLine: true
-};
-StyledTabsHeaderList.propTypes = {
-  align: PropTypes.oneOf(["left", "right"]),
-  position: PropTypes.oneOf(["top", "left"]),
-  isInSidebar: PropTypes.bool
-};
 export { StyledTabsHeaderWrapper, StyledTabsHeaderList };

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

@@ -1,2 +1,3 @@
-export { Tabs, Tab } from "./tabs";
-export * from "./tabs";
+export { Tabs, Tab } from "./tabs.component";
+export type { TabsProps } from "./tabs.component";
+export type { TabProps } from "./tab";

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

@@ -1,2 +1,2 @@
-export { default } from "./tab";
-export * from "./tab";
+export { default, TabContext } from "./tab.component";
+export type { TabProps, TabContextProps } from "./tab.component";

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+export interface TabContextProps {
+    setError?: (childId: string, error?: boolean | string) => void;
+    setWarning?: (childId: string, warning?: boolean | string) => void;
+    setInfo?: (childId: string, info?: boolean | string) => void;
+}
+export interface TabProps extends PaddingProps {
+    title?: string;
+    /** A unique ID to identify this specific tab. */
+    tabId: string;
+    /** @ignore @private */
+    className?: string;
+    /** The child elements of Tab component. */
+    children?: React.ReactNode;
+    /** @ignore @private Boolean indicating selected state of Tab. */
+    isTabSelected?: boolean;
+    /** The position of the Tab. */
+    position?: "top" | "left";
+    /** Message displayed when Tab has error */
+    errorMessage?: string;
+    /** Message displayed when Tab has warning */
+    warningMessage?: string;
+    /** Message displayed when Tab has warning */
+    infoMessage?: string;
+    /** Additional content to display with title */
+    siblings?: React.ReactNode;
+    /** Position title before or after siblings */
+    titlePosition?: "before" | "after";
+    /** Allows Tab to be a link */
+    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;
+    };
+    /** @private @ignore */
+    role?: string;
+    /** @private @ignore */
+    ariaLabelledby?: string;
+    /** @private @ignore */
+    updateErrors?: (id: string, errors: Record<string, string | boolean>) => void;
+    /** @private @ignore */
+    updateWarnings?: (id: string, warnings: Record<string, string | boolean>) => void;
+    /** @private @ignore */
+    updateInfos?: (id: string, infos: Record<string, string | boolean>) => void;
+}
+declare const TabContext: React.Context<TabContextProps>;
+export declare const Tab: ({ ariaLabelledby, className, children, isTabSelected, position, role, tabId, updateErrors, updateWarnings, updateInfos, href, title, titleProps, ...rest }: TabProps) => JSX.Element;
+export { TabContext };
+export default Tab;