carbon-react 116.1.2 → 116.2.0

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

@@ -2,12 +2,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import StyledTab from "./tab.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
-import { filterStyledSystemPaddingProps } from "../../../style/utils";
 const TabContext = /*#__PURE__*/React.createContext({});
-const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
 
 const Tab = ({
   ariaLabelledby,
@@ -21,7 +18,11 @@ const Tab = ({
   updateWarnings,
   updateInfos,
   href,
+  // title is destructured purely to NOT spread it as part of rest to the underlying HTML element.
+  // Both this and titleProps are used as part of child.props inside Tabs component
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   title,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   titleProps,
   ...rest
 }) => {
@@ -73,65 +74,183 @@ const Tab = ({
   }, tagComponent("tab", rest), rest), !href && children));
 };
 
-Tab.propTypes = { ...paddingPropTypes,
-  title: PropTypes.string,
-
-  /** A unique ID to identify this specific tab. */
-  tabId: PropTypes.string.isRequired,
-
-  /** @ignore @private */
-  className: PropTypes.string,
-
-  /** The child elements of Tab component. */
-  children: PropTypes.node,
-
-  /** Overrides Title default layout with a one defined in this prop */
-  customLayout: PropTypes.node,
-
-  /** @ignore @private Boolean indicating selected state of Tab. */
-  isTabSelected: PropTypes.bool,
-
-  /** The position of the Tab. */
-  position: PropTypes.oneOf(["top", "left"]),
-
-  /** @ignore @private */
-  role: PropTypes.string,
-
-  /** @ignore @private */
-  ariaLabelledby: PropTypes.string,
-
-  /** @ignore @private */
-  updateErrors: PropTypes.func,
-
-  /** @ignore @private */
-  updateWarnings: PropTypes.func,
-
-  /** @ignore @private */
-  updateInfos: PropTypes.func,
-
-  /** Message displayed when Tab has error */
-  errorMessage: PropTypes.string,
-
-  /** Message displayed when Tab has warning */
-  warningMessage: PropTypes.string,
-
-  /** Message displayed when Tab has warning */
-  infoMessage: PropTypes.string,
-
-  /** Additional content to display with title */
-  siblings: PropTypes.arrayOf(PropTypes.node),
-
-  /** Position title before or after siblings */
-  titlePosition: PropTypes.oneOf(["before", "after"]),
-
-  /** Allows Tab to be a link */
-  href: PropTypes.string,
-
-  /** Additional props to be passed to the Tab's corresponding title */
-  titleProps: PropTypes.shape({
-    /** Identifier used for testing purposes */
+Tab.propTypes = {
+  "ariaLabelledby": PropTypes.string,
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "customLayout": PropTypes.node,
+  "errorMessage": PropTypes.string,
+  "href": PropTypes.string,
+  "infoMessage": PropTypes.string,
+  "isTabSelected": PropTypes.bool,
+  "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "padding": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pl": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "position": PropTypes.oneOf(["left", "top"]),
+  "pr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "px": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "py": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "role": PropTypes.string,
+  "siblings": PropTypes.node,
+  "tabId": PropTypes.string.isRequired,
+  "title": PropTypes.string,
+  "titlePosition": PropTypes.oneOf(["after", "before"]),
+  "titleProps": PropTypes.shape({
     "data-role": PropTypes.string
-  })
+  }),
+  "updateErrors": PropTypes.func,
+  "updateInfos": PropTypes.func,
+  "updateWarnings": PropTypes.func,
+  "warningMessage": PropTypes.string
 };
+export { Tab };
 export { TabContext };
 export default Tab;

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

@@ -1,2 +1,9 @@
+import { ThemeObject } from "../../../style/themes/base";
+import { TabProps } from ".";
+export declare type StyledTabProps = Pick<TabProps, "position" | "isTabSelected"> & {
+    theme?: ThemeObject;
+};
+declare const StyledTab: import("styled-components").StyledComponent<"div", any, Pick<TabProps, "position" | "isTabSelected"> & {
+    theme?: ThemeObject | undefined;
+}, never>;
 export default StyledTab;
-declare const StyledTab: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import propTypes from "prop-types";
 import { padding } from "styled-system";
 import BaseTheme from "../../../style/themes/base";
 const StyledTab = styled.div`
@@ -7,7 +6,7 @@ const StyledTab = styled.div`
 
   ${({
   isTabSelected,
-  position
+  position = "top"
 }) => isTabSelected && css`
       display: block;
 
@@ -19,10 +18,6 @@ const StyledTab = styled.div`
     `}
 `;
 StyledTab.defaultProps = {
-  position: "top",
   theme: BaseTheme
 };
-StyledTab.propTypes = {
-  position: propTypes.oneOf(["top", "left"])
-};
 export default StyledTab;

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

@@ -0,0 +1,49 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import Tab from "./tab";
+export interface TabsProps extends MarginProps {
+    /** @ignore @private */
+    className?: string;
+    /** Prevent rendering of hidden tabs, by default this is set to true and therefore all tabs will be rendered */
+    renderHiddenTabs?: boolean;
+    /** Allows manual control over the currently selected tab. */
+    selectedTabId?: string;
+    /** The child elements of Tabs need to be Tab components. */
+    children: React.ReactNode;
+    /** Sets the alignment of the tab titles. Possible values include. */
+    align?: "left" | "right";
+    /** A callback for when a tab is changed. You can use this to manually control
+     * tab changing or to fire other events when a tab is changed.
+     */
+    onTabChange?: (tabId: string) => void;
+    /** The position of the tab title. */
+    position?: "top" | "left";
+    /** Sets size of the tab titles. */
+    size?: "default" | "large";
+    /** Sets the divider of the tab titles header to extend the full width of the parent. */
+    extendedLine?: boolean;
+    /** Adds a combination of borders to the tab titles. */
+    borders?: "off" | "on" | "no left side" | "no right side" | "no sides";
+    /** Adds an alternate styling variant to the tab titles. */
+    variant?: "default" | "alternate";
+    /** sets width to the tab headers. Can be any valid CSS string.
+     * The headerWidth prop works only for `position="left"`
+     */
+    headerWidth?: string;
+    /** An object to support overriding validation statuses, when the Tabs have custom targets for example.
+     * The `id` property should match the `tabId`s for the rendered Tabs.
+     */
+    validationStatusOverride?: {
+        [id: string]: {
+            error?: boolean;
+            warning?: boolean;
+            info?: boolean;
+        };
+    };
+    /** When this prop is set any string validation failures in the children of each Tab
+     * will be summaraised in the Tooltip next to the Tab title
+     */
+    showValidationsSummary?: boolean;
+}
+declare const Tabs: ({ align, className, children, onTabChange, selectedTabId, renderHiddenTabs, position, extendedLine, size, borders, variant, validationStatusOverride, headerWidth, showValidationsSummary, ...rest }: TabsProps) => JSX.Element;
+export { Tabs, Tab };