carbon-react 105.1.2 → 105.2.0

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;

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

@@ -1,5 +1,4 @@
 import styled, { css, keyframes } from "styled-components";
-import PropTypes from "prop-types";
 import baseTheme from "../../style/themes/base";
 import { toColor } from "../../style/utils/color";
 const fadeIn = keyframes`
@@ -12,7 +11,7 @@ const fadeIn = keyframes`
   }
 `;
 
-const tooltipColor = (type, theme, bgColor) => {
+const tooltipColor = (theme, bgColor, type) => {
   if (bgColor) return toColor(theme, bgColor);
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
@@ -51,14 +50,14 @@ const tooltipOffset = (position, inputSize, isPartOfInput) => {
   }
 };
 
-const StyledTooltipWrapper = styled.div`
+const StyledTooltip = styled.div`
   ${({
   position,
   size,
   theme,
   type,
   isPartOfInput,
-  inputSize,
+  inputSize = "medium",
   bgColor,
   fontColor
 }) => css`
@@ -77,24 +76,11 @@ const StyledTooltipWrapper = styled.div`
     font-size: ${size === "medium" ? "14px" : "16px"};
     line-height: 1.5rem;
     font-weight: 400;
-    background-color: ${tooltipColor(type, theme, bgColor)};
+    background-color: ${tooltipColor(theme, bgColor, type)};
     ${tooltipOffset(position, inputSize, isPartOfInput)};
   `}
 `;
-StyledTooltipWrapper.propTypes = {
-  position: PropTypes.oneOf(["top", "bottom", "left", "right"]),
-  size: PropTypes.oneOf(["medium", "large"]),
-  theme: PropTypes.object,
-  type: PropTypes.string,
-  isPartOfInput: PropTypes.bool,
-  inputSize: PropTypes.oneOf(["small", "medium", "large"]),
-  bgColor: PropTypes.string,
-  fontColor: PropTypes.string
+StyledTooltip.defaultProps = {
+  theme: baseTheme
 };
-StyledTooltipWrapper.defaultProps = {
-  theme: baseTheme,
-  size: "medium",
-  inputSize: "medium",
-  position: "top"
-};
-export default StyledTooltipWrapper;
+export default StyledTooltip;

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

@@ -12,4 +12,4 @@ declare const Typography: import("styled-components").StyledComponent<"span", an
     color: any;
     bg: any;
     backgroundColor: any;
-}, "as" | "size" | "textDecoration" | "lineHeight" | "textTransform" | "weight" | "defaultMargin">;
+}, "as" | "textDecoration" | "size" | "lineHeight" | "textTransform" | "weight" | "defaultMargin">;

package/esm/locales/en-gb.d.ts

@@ -1,5 +1,3 @@
-import Locale from ".";
-
-declare const EnGb: Locale;
-
-export default EnGb;
+import Locale from "./locale";
+declare const enGB: Locale;
+export default enGB;

package/esm/locales/en-gb.js

@@ -1,8 +1,8 @@
-import { enGB } from "./date-fns-locales";
+import { enGB as enGBDateLocale } from "./date-fns-locales";
 
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 
-export default {
+const enGB = {
   locale: () => "en-GB",
   actions: {
     edit: () => "Edit",
@@ -19,7 +19,7 @@ export default {
     yes: () => "Yes"
   },
   date: {
-    dateFnsLocale: () => enGB
+    dateFnsLocale: () => enGBDateLocale
   },
   dialog: {
     ariaLabels: {
@@ -128,4 +128,5 @@ export default {
       }
     }
   }
-};
+};
+export default enGB;

package/esm/locales/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from "./locale";
+export type { default } from "./locale";
 export { default as EnGb } from "./en-gb";
 export { default as PlPl } from "./pl-pl";

package/esm/locales/index.js

@@ -0,0 +1,2 @@
+export { default as EnGb } from "./en-gb";
+export { default as PlPl } from "./pl-pl";