carbon-react 105.1.2 → 106.0.1

package/esm/components/split-button/split-button.component.js

@@ -12,7 +12,7 @@ import StyledSplitButtonChildrenContainer from "./split-button-children.style";
 import Events from "../../__internal__/utils/helpers/events";
 import guid from "../../__internal__/utils/helpers/guid";
 import Popover from "../../__internal__/popover";
-import { filterStyledSystemMarginProps } from "../../style/utils";
+import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
 import { baseTheme } from "../../style/themes";
 import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
 import Logger from "../../__internal__/utils/logger";
@@ -32,6 +32,8 @@ const SplitButton = ({
   size = "medium",
   subtext,
   text,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }) => {
   if (!deprecatedWarnTriggered && as) {
@@ -114,7 +116,8 @@ const SplitButton = ({
       iconType,
       onClick,
       size,
-      subtext
+      subtext,
+      ...filterOutStyledSystemSpacingProps(rest)
     };
   }
 
@@ -142,8 +145,8 @@ const SplitButton = ({
   function componentTags() {
     return {
       "data-component": "split-button",
-      "data-element": rest["data-element"],
-      "data-role": rest["data-role"]
+      "data-element": dataElement,
+      "data-role": dataRole
     };
   }
 

package/esm/components/split-button/split-button.d.ts

@@ -1,6 +1,9 @@
 import * as React from "react";
+import { MarginProps } from "styled-system";
 
-export interface SplitButtonProps {
+export interface SplitButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    MarginProps {
   /** Set align of the rendered content */
   align?: "left" | "right";
   /** Button type: "primary" | "secondary" for legacy theme */
@@ -23,6 +26,6 @@ export interface SplitButtonProps {
   text: string;
 }
 
-declare class SplitButton extends React.Component<SplitButtonProps> {}
+declare function SplitButton(props: SplitButtonProps): JSX.Element;
 
 export default SplitButton;

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

@@ -356,18 +356,16 @@ const StyledTabTitle = styled.button`
 
     ${alternateStyling && css`
         &:focus {
-          background-color: var(--colorsActionMinor100);
+          background-color: var(--colorsActionMinor200);
         }
 
         &:hover {
-          background-color: ${isTabSelected ? "var(--colorsActionMinor100)" : "var(--colorsActionMinor150)"};
+          background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
         }
 
         ${isTabSelected && css`
-          background-color: var(--colorsActionMinor100);
+          background-color: var(--colorsActionMinor200);
         `}
-
-        ${isInSidebar && `padding-bottom: 1px;`}
       `}
   `}
 `;

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

@@ -1,6 +1,5 @@
 export { Textbox as OriginalTextbox };
-declare var _default: JSX.Element;
-export default _default;
+export default Textbox;
 declare function Textbox({ align, autoFocus, children, disabled, inputIcon, leftChildren, labelId: externalLabelId, label, labelAlign, labelHelp, labelInline, labelSpacing, id, formattedValue, fieldHelp, error, warning, info, name, reverse, size, value, readOnly, placeholder, inputRef, onBlur, onClick, onFocus, onChange, onMouseDown, onChangeDeferred, deferTimeout, isOptional, iconOnClick, iconOnMouseDown, iconTabIndex, validationOnLabel, labelWidth, inputWidth, prefix, adaptiveLabelBreakpoint, required, positionedChildren, tooltipPosition, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, enforceCharacterLimit, characterLimit, warnOverLimit, helpAriaLabel, ...props }: {
     [x: string]: any;
     align: any;

package/esm/components/textbox/textbox.component.js

@@ -7,7 +7,7 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import { Input, InputPresentation } from "../../__internal__/input";
 import InputIconToggle from "../../__internal__/input-icon-toggle";
 import FormField from "../../__internal__/form-field";
-import withUniqueIdProps from "../../__internal__/utils/helpers/with-unique-id-props";
+import useUniqueId from "../../__internal__/utils/helpers/useUniqueId";
 import { InputBehaviour } from "../../__internal__/input-behaviour";
 import StyledPrefix from "./__internal__/prefix.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
@@ -83,13 +83,14 @@ const Textbox = ({
 
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
 
+  const [uniqueId, uniqueName] = useUniqueId(id, name);
   const {
     labelId: internalLabelId,
     validationIconId,
     fieldHelpId,
     ariaDescribedBy
   } = useInputAccessibility({
-    id,
+    id: uniqueId,
     error,
     warning,
     info,
@@ -115,7 +116,7 @@ const Textbox = ({
     labelInline: computeLabelPropValues(labelInline),
     labelSpacing: labelSpacing,
     labelWidth: computeLabelPropValues(labelWidth),
-    id: id,
+    id: uniqueId,
     reverse: computeLabelPropValues(reverse),
     isOptional: isOptional,
     useValidationIcon: computeLabelPropValues(validationOnLabel),
@@ -155,9 +156,9 @@ const Textbox = ({
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,
-    id: id,
+    id: uniqueId,
     inputRef: inputRef,
-    name: name,
+    name: uniqueName,
     onBlur: onBlur,
     onChange: onChange,
     onChangeDeferred: onChangeDeferred,
@@ -379,4 +380,4 @@ Textbox.defaultProps = {
   validationOnLabel: false
 };
 export { Textbox as OriginalTextbox };
-export default withUniqueIdProps(Textbox);
+export default Textbox;

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

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

package/esm/components/tooltip/tooltip-pointer.style.d.ts

@@ -1,2 +1,11 @@
+import { Placement } from "tippy.js";
+interface StyledTooltipPointer {
+    /** Sets position of the tooltip */
+    position?: Placement;
+    /** Defines the message type */
+    type?: string;
+    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    bgColor?: string;
+}
+declare const StyledTooltipPointer: import("styled-components").StyledComponent<"div", any, StyledTooltipPointer, never>;
 export default StyledTooltipPointer;
-declare const StyledTooltipPointer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/tooltip/tooltip-pointer.style.js

@@ -1,9 +1,8 @@
-import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import { toColor } from "../../style/utils/color";
 
-const pointerColor = (type, theme, bgColor) => {
+const pointerColor = (theme, bgColor, type) => {
   if (bgColor) return toColor(theme, bgColor);
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
@@ -22,7 +21,7 @@ const StyledTooltipPointer = styled.div`
     ${position === "top" && css`
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
-      border-top: 8px solid ${pointerColor(type, theme, bgColor)};
+      border-top: 8px solid ${pointerColor(theme, bgColor, type)};
       bottom: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         bottom: -7px;
@@ -32,7 +31,7 @@ const StyledTooltipPointer = styled.div`
     ${position === "bottom" && css`
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
-      border-bottom: 8px solid ${pointerColor(type, theme, bgColor)};
+      border-bottom: 8px solid ${pointerColor(theme, bgColor, type)};
       top: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         top: -7px;
@@ -42,7 +41,7 @@ const StyledTooltipPointer = styled.div`
     ${position === "right" && css`
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
-      border-right: 8px solid ${pointerColor(type, theme, bgColor)};
+      border-right: 8px solid ${pointerColor(theme, bgColor, type)};
       left: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         left: -7px;
@@ -52,7 +51,7 @@ const StyledTooltipPointer = styled.div`
     ${position === "left" && css`
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
-      border-left: 8px solid ${pointerColor(type, theme, bgColor)};
+      border-left: 8px solid ${pointerColor(theme, bgColor, type)};
       right: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         right: -7px;
@@ -64,10 +63,4 @@ StyledTooltipPointer.defaultProps = {
   theme: baseTheme,
   position: "top"
 };
-StyledTooltipPointer.propTypes = {
-  position: PropTypes.oneOf(["bottom", "left", "right", "top"]),
-  theme: PropTypes.object,
-  type: PropTypes.string,
-  bgColor: PropTypes.string
-};
 export default StyledTooltipPointer;

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

@@ -1,3 +1,34 @@
-export default Tooltip;
-declare const Tooltip: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";
+import { TooltipPositions } from "./tooltip.config";
+export declare type InputSizes = "small" | "medium" | "large";
+export interface TooltipProps {
+    /** The message to be displayed within the tooltip */
+    message: React.ReactNode;
+    /** The id attribute to use for the tooltip */
+    id?: string;
+    /** Whether to to show the Tooltip */
+    isVisible?: boolean;
+    /** Sets position of the tooltip */
+    position?: TooltipPositions;
+    /** Defines the message type */
+    type?: string;
+    /** Children elements */
+    children: React.ReactElement;
+    /** Defines the size of the tooltip content */
+    size?: "medium" | "large";
+    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    bgColor?: string;
+    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    fontColor?: string;
+    /**
+     * Overrides the default flip behaviour of the Tooltip,
+     * must be an array containing some or all of ["top", "bottom", "left", "right"]
+     * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
+     */
+    flipOverrides?: TooltipPositions[];
+    target?: Element;
+    isPartOfInput?: boolean;
+    inputSize?: InputSizes;
+}
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement | null>>;
+export default Tooltip;

package/esm/components/tooltip/tooltip.component.js

@@ -1,134 +1,279 @@
-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); }
+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);
+}
 
-import React, { useRef } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import Tippy from "@tippyjs/react/headless";
 import { sticky } from "tippy.js";
+import invariant from "invariant";
 import StyledTooltip from "./tooltip.style";
 import StyledPointer from "./tooltip-pointer.style";
+import { TOOLTIP_POSITIONS } from "./tooltip.config";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 const TOOLTIP_DELAY = 100;
 const tippyPlugins = [sticky];
-const Tooltip = /*#__PURE__*/React.forwardRef(({
-  children,
-  isVisible,
-  position = "top",
-  message,
-  type,
-  size = "medium",
-  isPartOfInput,
-  inputSize,
-  id,
-  bgColor,
-  fontColor,
-  flipOverrides,
-  target,
-  ...rest
-}, ref) => {
-  const tooltipRef = useRef(ref || null);
+const Tooltip = /*#__PURE__*/ React.forwardRef(
+  (
+    {
+      children,
+      isVisible,
+      position = "top",
+      message,
+      type,
+      size = "medium",
+      isPartOfInput,
+      inputSize,
+      id,
+      bgColor,
+      fontColor,
+      flipOverrides,
+      target,
+      ...rest
+    },
+    ref
+  ) => {
+    const isFlipOverridesValid =
+      !flipOverrides ||
+      (Array.isArray(flipOverrides) &&
+        flipOverrides.every((placement) =>
+          TOOLTIP_POSITIONS.includes(placement)
+        ));
+    invariant(
+      isFlipOverridesValid,
+      `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`
+    );
 
-  const tooltip = (attrs, content) => {
-    const currentPosition = attrs["data-placement"] || position;
-    return /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(StyledTooltip, _extends({
-      "data-element": "tooltip",
-      role: "tooltip",
-      tabIndex: "-1",
-      type: type,
-      size: size,
-      id: id
-    }, tagComponent("tooltip", rest), {
-      isPartOfInput: isPartOfInput,
-      inputSize: inputSize
-    }, attrs, {
-      position: currentPosition,
-      ref: tooltipRef,
-      bgColor: bgColor,
-      fontColor: fontColor
-    }), /*#__PURE__*/React.createElement(StyledPointer, _extends({
-      key: "pointer",
-      type: type
-    }, attrs, {
-      position: currentPosition,
-      "data-popper-arrow": "",
-      "data-element": "tooltip-pointer",
-      bgColor: bgColor
-    })), content));
-  };
+    const tooltip = (attrs, content) => {
+      const currentPosition = attrs["data-placement"] || position;
+      return /*#__PURE__*/ React.createElement(
+        CarbonScopedTokensProvider,
+        null,
+        /*#__PURE__*/ React.createElement(
+          StyledTooltip,
+          _extends(
+            {
+              "data-element": "tooltip",
+              role: "tooltip",
+              tabIndex: -1,
+              type: type,
+              size: size,
+              id: id,
+            },
+            tagComponent("tooltip", rest),
+            {
+              isPartOfInput: isPartOfInput,
+              inputSize: inputSize,
+            },
+            attrs,
+            {
+              position: currentPosition,
+              ref: ref,
+              bgColor: bgColor,
+              fontColor: fontColor,
+            }
+          ),
+          /*#__PURE__*/ React.createElement(
+            StyledPointer,
+            _extends(
+              {
+                key: "pointer",
+                type: type,
+              },
+              attrs,
+              {
+                position: currentPosition,
+                "data-popper-arrow": "",
+                "data-element": "tooltip-pointer",
+                bgColor: bgColor,
+              }
+            )
+          ),
+          content
+        )
+      );
+    };
 
-  return /*#__PURE__*/React.createElement(Tippy, _extends({
-    placement: position,
-    delay: TOOLTIP_DELAY
-  }, isVisible !== undefined && {
-    visible: isVisible
-  }, {
-    plugins: tippyPlugins,
-    sticky: true,
-    render: attrs => tooltip(attrs, message),
-    reference: target,
-    popperOptions: {
-      modifiers: [...(flipOverrides ? [{
-        name: "flip",
-        options: {
-          fallbackPlacements: flipOverrides
-        }
-      }] : []), {
-        name: "computeStyles",
-        options: {
-          gpuAcceleration: false
+    return /*#__PURE__*/ React.createElement(
+      Tippy,
+      _extends(
+        {
+          placement: position,
+          delay: TOOLTIP_DELAY,
+        },
+        isVisible !== undefined && {
+          visible: isVisible,
+        },
+        {
+          plugins: tippyPlugins,
+          sticky: true,
+          render: (attrs) => tooltip(attrs, message),
+          reference: target,
+          popperOptions: {
+            modifiers: [
+              ...(flipOverrides
+                ? [
+                    {
+                      name: "flip",
+                      options: {
+                        fallbackPlacements: flipOverrides,
+                      },
+                    },
+                  ]
+                : []),
+              {
+                name: "computeStyles",
+                options: {
+                  gpuAcceleration: false,
+                },
+              },
+            ],
+          },
         }
-      }]
-    }
-  }), children);
-});
-const placements = ["top", "bottom", "left", "right"];
-Tooltip.propTypes = {
-  /** The message to be displayed within the tooltip */
-  message: PropTypes.node.isRequired,
+      ),
+      children
+    );
+  }
+);
 
-  /** The id attribute to use for the tooltip */
+Tooltip.propTypes = {
+  /**
+   * Override background color of the Tooltip, provide any color from palette or any valid css color value.
+   */
+  bgColor: PropTypes.string,
+  /**
+   * Children elements
+   */
+  children: PropTypes.element.isRequired,
+  /**
+   * Overrides the default flip behaviour of the Tooltip,
+   * must be an array containing some or all of ["top", "bottom", "left", "right"]
+   * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
+   */
+  flipOverrides: PropTypes.arrayOf(
+    PropTypes.oneOf(["bottom", "left", "right", "top"])
+  ),
+  /**
+   * Override font color of the Tooltip, provide any color from palette or any valid css color value.
+   */
+  fontColor: PropTypes.string,
+  /**
+   * The id attribute to use for the tooltip
+   */
   id: PropTypes.string,
-
-  /** Whether to to show the Tooltip */
+  inputSize: PropTypes.oneOf(["large", "medium", "small"]),
+  isPartOfInput: PropTypes.bool,
+  /**
+   * Whether to to show the Tooltip
+   */
   isVisible: PropTypes.bool,
-
-  /** Sets position of the tooltip */
-  position: PropTypes.oneOf(placements),
-
-  /** Defines the message type */
+  key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The message to be displayed within the tooltip
+   */
+  message: PropTypes.node,
+  /**
+   * Sets position of the tooltip
+   */
+  position: PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  /**
+   * Defines the size of the tooltip content
+   */
+  size: PropTypes.oneOf(["large", "medium"]),
+  target: function (props, propName) {
+    if (props[propName] == null) {
+      return null;
+    } else if (
+      typeof props[propName] !== "object" ||
+      props[propName].nodeType !== 1
+    ) {
+      return new Error(
+        "Expected prop '" + propName + "' to be of type Element"
+      );
+    }
+  },
+  /**
+   * Defines the message type
+   */
   type: PropTypes.string,
+};
 
-  /** Children elements */
-  children: PropTypes.node.isRequired,
-
-  /** Defines the size of the tooltip content */
-  size: PropTypes.oneOf(["medium", "large"]),
-  // Reference element, tooltip will be positioned in relation to this element
-  target: PropTypes.instanceOf(Element),
-
-  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
+Tooltip.propTypes = {
+  /**
+   * Override background color of the Tooltip, provide any color from palette or any valid css color value.
+   */
   bgColor: PropTypes.string,
-
-  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
+  /**
+   * Children elements
+   */
+  children: PropTypes.element.isRequired,
+  /**
+   * Overrides the default flip behaviour of the Tooltip,
+   * must be an array containing some or all of ["top", "bottom", "left", "right"]
+   * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
+   */
+  flipOverrides: PropTypes.arrayOf(
+    PropTypes.oneOf(["bottom", "left", "right", "top"])
+  ),
+  /**
+   * Override font color of the Tooltip, provide any color from palette or any valid css color value.
+   */
   fontColor: PropTypes.string,
-
-  /** @ignore @private */
+  /**
+   * The id attribute to use for the tooltip
+   */
+  id: PropTypes.string,
+  inputSize: PropTypes.oneOf(["large", "medium", "small"]),
   isPartOfInput: PropTypes.bool,
-
-  /** @ignore @private */
-  inputSize: PropTypes.oneOf(["small", "medium", "large"]),
-
-  /** Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"] (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) */
-  flipOverrides: (props, propName) => {
-    const prop = props[propName];
-    const isValid = prop && Array.isArray(prop) && prop.every(placement => placements.includes(placement));
-
-    if (!prop || isValid) {
+  /**
+   * Whether to to show the Tooltip
+   */
+  isVisible: PropTypes.bool,
+  key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The message to be displayed within the tooltip
+   */
+  message: PropTypes.node,
+  /**
+   * Sets position of the tooltip
+   */
+  position: PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  /**
+   * Defines the size of the tooltip content
+   */
+  size: PropTypes.oneOf(["large", "medium"]),
+  target: function (props, propName) {
+    if (props[propName] == null) {
       return null;
+    } else if (
+      typeof props[propName] !== "object" ||
+      props[propName].nodeType !== 1
+    ) {
+      return new Error(
+        "Expected prop '" + propName + "' to be of type Element"
+      );
     }
-
-    return new Error( // eslint-disable-next-line max-len
-    `The \`${propName}\` prop supplied to \`Tooltip\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
-  }
+  },
+  /**
+   * Defines the message type
+   */
+  type: PropTypes.string,
 };
-export default Tooltip;
+
+export { Tooltip };
+Tooltip.displayName = "Tooltip";
+export default Tooltip;

package/esm/components/tooltip/tooltip.config.d.ts

@@ -1 +1,2 @@
-export const TOOLTIP_POSITIONS: string[];
+export declare const TOOLTIP_POSITIONS: string[];
+export declare type TooltipPositions = "top" | "bottom" | "left" | "right";

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

@@ -1,2 +1,7 @@
-export default StyledTooltipWrapper;
-declare const StyledTooltipWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { Placement } from "tippy.js";
+import { TooltipProps } from "./tooltip.component";
+interface StyledTooltipProps extends Omit<TooltipProps, "children" | "message" | "position"> {
+    position: Placement;
+}
+declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, StyledTooltipProps, never>;
+export default StyledTooltip;