carbon-react 116.1.2 → 116.2.0

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

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState, createRef, cloneElement, Children } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import Tab from "./tab";
 import Event from "../../__internal__/utils/helpers/events";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
@@ -10,8 +9,6 @@ import StyledTabs from "./tabs.style";
 import TabsHeader from "./__internal__/tabs-header";
 import TabTitle from "./__internal__/tab-title";
 import { DrawerSidebarContext } from "../drawer";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Tabs = ({
   align = "left",
@@ -30,7 +27,13 @@ const Tabs = ({
   showValidationsSummary,
   ...rest
 }) => {
+  if (position !== "left" && headerWidth !== undefined) {
+    // eslint-disable-next-line no-console
+    console.error("Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left");
+  }
   /** The children nodes converted into an Array */
+
+
   const filteredChildren = useMemo(() => Children.toArray(children).filter(child => child), [children]);
   /** Array of the tabIds for the child nodes */
 
@@ -84,7 +87,12 @@ const Tabs = ({
     }
   }, [onTabChange, isTabSelected, hasTabStop]);
   const blurPreviousSelectedTab = useCallback(() => {
-    const previousTabIndex = tabIds.indexOf(previousSelectedTabId.current);
+    const {
+      current
+    } = previousSelectedTabId;
+    const previousTabIndex = current ? tabIds.indexOf(current) :
+    /* istanbul ignore next */
+    -1;
     /* istanbul ignore else */
 
     if (previousTabIndex !== -1) {
@@ -119,7 +127,11 @@ const Tabs = ({
   /** Focuses the tab for the reference specified */
 
 
-  const focusTab = ref => ref.current.focus();
+  const focusTab = ref => {
+    var _ref$current;
+
+    return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+  };
   /** Will trigger the tab at the given index. */
 
 
@@ -211,7 +223,7 @@ const Tabs = ({
         onClick: handleTabClick,
         onKeyDown: handleKeyDown(index),
         ref: tabRefs[index],
-        tabIndex: isTabSelected(tabId) || hasTabStop(tabId) ? "0" : "-1",
+        tabIndex: isTabSelected(tabId) || hasTabStop(tabId) ? 0 : -1,
         title: title,
         href: href,
         isTabSelected: isTabSelected(tabId),
@@ -279,75 +291,181 @@ const Tabs = ({
 
   return /*#__PURE__*/React.createElement(StyledTabs, _extends({
     className: className,
-    position: isInSidebar ? "left" : position,
-    updateErrors: updateErrors,
-    updateWarnings: updateWarnings
+    position: isInSidebar ? "left" : position
   }, tagComponent("tabs", rest), {
     isInSidebar: isInSidebar,
     headerWidth: headerWidth
   }, rest), renderTabHeaders(), renderTabs());
 };
 
-Tabs.propTypes = { ...marginPropTypes,
-
-  /** @ignore @private */
-  className: PropTypes.string,
-
-  /** Prevent rendering of hidden tabs, by default this is set to true and therefore all tabs will be rendered */
-  renderHiddenTabs: PropTypes.bool,
-
-  /** Allows manual control over the currently selected tab. */
-  selectedTabId: PropTypes.string,
-
-  /** The child elements of Tabs need to be Tab components. */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-
-  /** Sets the alignment of the tab titles. Possible values include. */
-  align: PropTypes.oneOf(["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: PropTypes.func,
-
-  /** The position of the tab title. */
-  position: PropTypes.oneOf(["top", "left"]),
-
-  /** Sets size of the tab titles. */
-  size: PropTypes.oneOf(["default", "large"]),
-
-  /** Sets the divider of the tab titles header to extend the full width of the parent. */
-  extendedLine: PropTypes.bool,
-
-  /** Adds a combination of borders to the tab titles. */
-  borders: PropTypes.oneOf(["off", "on", "no left side", "no right side", "no sides"]),
-
-  /** sets width to the tab headers. Can be any valid CSS string.
-   * The headerWidth prop works only for `position="left"`
-   */
-  headerWidth: (props, propName, componentName) => {
-    if (props.position !== "left" && props[propName] !== undefined) {
-      return new Error(`Invalid usage of prop ${propName} in ${componentName}. The ${propName} can be used only if position is set to left`);
-    }
-
-    return null;
-  },
-
-  /** Adds an alternate styling variant to the tab titles. */
-  variant: PropTypes.oneOf(["default", "alternate"]),
-
-  /** 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: PropTypes.shape({
-    id: PropTypes.shape({
-      error: PropTypes.bool,
-      warning: PropTypes.bool,
-      info: PropTypes.bool
-    })
-  }),
-
-  /** 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: PropTypes.bool
+Tabs.propTypes = {
+  "align": PropTypes.oneOf(["left", "right"]),
+  "borders": PropTypes.oneOf(["no left side", "no right side", "no sides", "off", "on"]),
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "extendedLine": PropTypes.bool,
+  "headerWidth": PropTypes.string,
+  "m": 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]),
+  "margin": 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]),
+  "marginBottom": 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]),
+  "marginLeft": 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]),
+  "marginRight": 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]),
+  "marginTop": 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]),
+  "marginX": 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]),
+  "marginY": 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]),
+  "mb": 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]),
+  "ml": 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]),
+  "mr": 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]),
+  "mt": 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]),
+  "mx": 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]),
+  "my": 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]),
+  "onTabChange": PropTypes.func,
+  "position": PropTypes.oneOf(["left", "top"]),
+  "renderHiddenTabs": PropTypes.bool,
+  "selectedTabId": PropTypes.string,
+  "showValidationsSummary": PropTypes.bool,
+  "size": PropTypes.oneOf(["default", "large"]),
+  "validationStatusOverride": PropTypes.object,
+  "variant": PropTypes.oneOf(["alternate", "default"])
 };
 export { Tabs, Tab };

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

@@ -1,2 +1,6 @@
+import { TabsProps } from ".";
+export interface StyledTabsProps extends Pick<TabsProps, "headerWidth" | "position"> {
+    isInSidebar?: boolean;
+}
+declare const StyledTabs: import("styled-components").StyledComponent<"div", any, StyledTabsProps, never>;
 export default StyledTabs;
-declare const StyledTabs: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,13 +1,12 @@
 import styled, { css } from "styled-components";
 import { margin } from "styled-system";
-import PropTypes from "prop-types";
 import BaseTheme from "../../style/themes/base";
 import { StyledTabsHeaderWrapper } from "./__internal__/tabs-header/tabs-header.style";
 import StyledTab from "./tab/tab.style";
 const StyledTabs = styled.div`
   ${({
   position,
-  inSidebar,
+  isInSidebar,
   headerWidth
 }) => css`
     color: var(--colorsActionMinorYin090);
@@ -23,7 +22,7 @@ const StyledTabs = styled.div`
         }
       `}
 
-      ${!inSidebar && css`
+      ${!isInSidebar && css`
         display: flex;
       `}
 
@@ -34,11 +33,6 @@ const StyledTabs = styled.div`
   ${margin}
 `;
 StyledTabs.defaultProps = {
-  position: "top",
   theme: BaseTheme
 };
-StyledTabs.propTypes = {
-  position: PropTypes.oneOf(["top", "left"]),
-  hasCustomTarget: PropTypes.bool
-};
 export default StyledTabs;

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

@@ -25,7 +25,7 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     formattedValue?: string;
     /**
      * Unique identifier for the input.
-     * Label id will be based on it, using following pattern: <id>-label.
+     * Label id will be based on it, using following pattern: [id]-label.
      * Will use a randomly generated GUID if none is provided.
      */
     id?: string;

package/lib/__internal__/utils/helpers/events/events.d.ts

@@ -17,7 +17,7 @@ declare const Events: {
     /**
      * Determines if event is a keyboard event
      */
-    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is React.KeyboardEvent<Element> | KeyboardEvent;
+    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is KeyboardEvent | React.KeyboardEvent<Element>;
     /**
      * Determines if a number key along the top of the keyboard or a number key on the
      * keypad is pressed

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

@@ -3,7 +3,7 @@ import { SpaceProps } from "styled-system";
 import { StyledAccordionContainerProps } from "./accordion.style";
 export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps {
     /** Width of the buttonHeading when it's set, defaults to 150px */
-    buttonWidth?: number;
+    buttonWidth?: number | string;
     /** Content of the Accordion component */
     children?: React.ReactNode;
     /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */

package/lib/components/accordion/accordion.component.js

@@ -49,7 +49,7 @@ const Accordion = /*#__PURE__*/_react.default.forwardRef(({
   warning,
   info,
   buttonHeading,
-  buttonWidth = 150,
+  buttonWidth = "150px",
   openTitle,
   ...rest
 }, ref) => {
@@ -152,7 +152,7 @@ exports.Accordion = Accordion;
 Accordion.propTypes = {
   "borders": _propTypes.default.oneOf(["default", "full", "none"]),
   "buttonHeading": _propTypes.default.bool,
-  "buttonWidth": _propTypes.default.number,
+  "buttonWidth": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "children": _propTypes.default.node,
   "defaultExpanded": _propTypes.default.bool,
   "disableContentPadding": _propTypes.default.bool,

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

@@ -28,7 +28,7 @@ interface StyledAccordionHeadingsContainerProps {
 declare const StyledAccordionHeadingsContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionHeadingsContainerProps, never>;
 interface StyledAccordionTitleContainerProps {
     buttonHeading?: boolean;
-    buttonWidth?: number;
+    buttonWidth?: number | string;
     hasButtonProps?: boolean;
     iconAlign?: "left" | "right";
     size?: "large" | "small";

package/lib/components/accordion/accordion.style.js

@@ -180,7 +180,7 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
       }
 
       ${buttonWidth && (0, _styledComponents.css)`
-        width: ${buttonWidth}px;
+        width: ${typeof buttonWidth === "number" ? `${buttonWidth}px` : buttonWidth};
       `}
     `}
   `}

package/lib/components/date/date.component.js

@@ -70,6 +70,9 @@ const DateInput = /*#__PURE__*/_react.default.forwardRef(({
   tooltipPosition,
   value,
   inputRef,
+  inputWidth,
+  labelWidth,
+  maxWidth,
   ...rest
 }, ref) => {
   const wrapperRef = (0, _react.useRef)();
@@ -336,7 +339,9 @@ const DateInput = /*#__PURE__*/_react.default.forwardRef(({
     "data-element": dataElement,
     "data-role": dataRole
   }, marginProps, {
-    applyDateRangeStyling: !!inputRefMap
+    applyDateRangeStyling: !!inputRefMap,
+    maxWidth: maxWidth,
+    inputWidth: inputWidth
   }), /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, (0, _utils2.filterOutStyledSystemSpacingProps)(rest), {
     inputRef: inputRef,
     value: computedValue(),
@@ -358,6 +363,9 @@ const DateInput = /*#__PURE__*/_react.default.forwardRef(({
     size: size,
     disabled: disabled,
     readOnly: readOnly,
+    inputWidth: inputWidth,
+    labelWidth: labelWidth,
+    maxWidth: maxWidth,
     m: 0
   })), /*#__PURE__*/_react.default.createElement(_datePicker.default, {
     disablePortal: disablePortal,

package/lib/components/date/date.style.js

@@ -40,8 +40,10 @@ const StyledDateInput = _styledComponents.default.div`
   & ${_inputPresentation.default} {
     flex: none;
     width: ${({
+  inputWidth,
+  maxWidth,
   size
-}) => datePickerWidth[size]};
+}) => maxWidth || inputWidth ? "" : datePickerWidth[size]};
 
     ${_input.default} {
       margin-right: -8px;
@@ -50,11 +52,12 @@ const StyledDateInput = _styledComponents.default.div`
 
   ${({
   applyDateRangeStyling,
+  maxWidth,
   size,
   labelInline
 }) => applyDateRangeStyling && !labelInline && (0, _styledComponents.css)`
       ${_formField.FieldLineStyle} {
-        max-width: ${datePickerWidth[size]};
+        max-width: ${maxWidth || datePickerWidth[size]}};
       }
 
       ${_validationMessage.default}, ${_label.default} {

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconType } from "../icon";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface DetailProps extends MarginProps, TagProps {
+    /** Custom className. */
+    className?: string;
+    /** The type of icon to use. */
+    icon?: IconType;
+    /** A small detail to display under the main content. */
+    footnote?: string;
+    /** The rendered children of the component. */
+    children?: React.ReactNode;
+}
+export declare const Detail: {
+    ({ className, icon, footnote, children, ...rest }: DetailProps): JSX.Element;
+    displayName: string;
+};
+export default Detail;