carbon-react 105.1.0 → 105.2.0

package/lib/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/lib/components/tooltip/tooltip-pointer.style.js

@@ -5,21 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
 var _color = require("../../style/utils/color");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const pointerColor = (type, theme, bgColor) => {
+const pointerColor = (theme, bgColor, type) => {
   if (bgColor) return (0, _color.toColor)(theme, bgColor);
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
@@ -38,7 +36,7 @@ const StyledTooltipPointer = _styledComponents.default.div`
     ${position === "top" && (0, _styledComponents.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;
@@ -48,7 +46,7 @@ const StyledTooltipPointer = _styledComponents.default.div`
     ${position === "bottom" && (0, _styledComponents.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;
@@ -58,7 +56,7 @@ const StyledTooltipPointer = _styledComponents.default.div`
     ${position === "right" && (0, _styledComponents.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;
@@ -68,7 +66,7 @@ const StyledTooltipPointer = _styledComponents.default.div`
     ${position === "left" && (0, _styledComponents.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;
@@ -80,11 +78,5 @@ StyledTooltipPointer.defaultProps = {
   theme: _base.default,
   position: "top"
 };
-StyledTooltipPointer.propTypes = {
-  position: _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
-  theme: _propTypes.default.object,
-  type: _propTypes.default.string,
-  bgColor: _propTypes.default.string
-};
 var _default = StyledTooltipPointer;
 exports.default = _default;

package/lib/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/lib/components/tooltip/tooltip.component.js

@@ -1,158 +1,249 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
-exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+exports.default = exports.Tooltip = void 0;
 
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _headless = _interopRequireDefault(require("@tippyjs/react/headless"));
 
 var _tippy = require("tippy.js");
 
-var _tooltip = _interopRequireDefault(require("./tooltip.style"));
-
-var _tooltipPointer = _interopRequireDefault(require("./tooltip-pointer.style"));
-
-var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
-
-var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _invariant = _interopRequireDefault(require("invariant"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _tooltip = _interopRequireDefault(require("./tooltip.style"));
 
-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); }
+var _tooltipPointer = _interopRequireDefault(
+  require("./tooltip-pointer.style")
+);
+
+var _tooltip2 = require("./tooltip.config");
+
+var _tags = _interopRequireDefault(
+  require("../../__internal__/utils/helpers/tags/tags")
+);
+
+var _carbonScopedTokensProvider = _interopRequireDefault(
+  require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component")
+);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+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);
+}
 
 const TOOLTIP_DELAY = 100;
 const tippyPlugins = [_tippy.sticky];
 
-const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
-  children,
-  isVisible,
-  position = "top",
-  message,
-  type,
-  size = "medium",
-  isPartOfInput,
-  inputSize,
-  id,
-  bgColor,
-  fontColor,
-  flipOverrides,
-  target,
-  ...rest
-}, ref) => {
-  const tooltipRef = (0, _react.useRef)(ref || null);
-
-  const tooltip = (attrs, content) => {
-    const currentPosition = attrs["data-placement"] || position;
-    return /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
-      "data-element": "tooltip",
-      role: "tooltip",
-      tabIndex: "-1",
-      type: type,
-      size: size,
-      id: id
-    }, (0, _tags.default)("tooltip", rest), {
-      isPartOfInput: isPartOfInput,
-      inputSize: inputSize
-    }, attrs, {
-      position: currentPosition,
-      ref: tooltipRef,
-      bgColor: bgColor,
-      fontColor: fontColor
-    }), /*#__PURE__*/_react.default.createElement(_tooltipPointer.default, _extends({
-      key: "pointer",
-      type: type
-    }, attrs, {
-      position: currentPosition,
-      "data-popper-arrow": "",
-      "data-element": "tooltip-pointer",
-      bgColor: bgColor
-    })), content));
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_headless.default, _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
+const Tooltip = /*#__PURE__*/ _react.default.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) =>
+          _tooltip2.TOOLTIP_POSITIONS.includes(placement)
+        ));
+    (0, _invariant.default)(
+      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.default.createElement(
+        _carbonScopedTokensProvider.default,
+        null,
+        /*#__PURE__*/ _react.default.createElement(
+          _tooltip.default,
+          _extends(
+            {
+              "data-element": "tooltip",
+              role: "tooltip",
+              tabIndex: -1,
+              type: type,
+              size: size,
+              id: id,
+            },
+            (0, _tags.default)("tooltip", rest),
+            {
+              isPartOfInput: isPartOfInput,
+              inputSize: inputSize,
+            },
+            attrs,
+            {
+              position: currentPosition,
+              ref: ref,
+              bgColor: bgColor,
+              fontColor: fontColor,
+            }
+          ),
+          /*#__PURE__*/ _react.default.createElement(
+            _tooltipPointer.default,
+            _extends(
+              {
+                key: "pointer",
+                type: type,
+              },
+              attrs,
+              {
+                position: currentPosition,
+                "data-popper-arrow": "",
+                "data-element": "tooltip-pointer",
+                bgColor: bgColor,
+              }
+            )
+          ),
+          content
+        )
+      );
+    };
+
+    return /*#__PURE__*/ _react.default.createElement(
+      _headless.default,
+      _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);
-});
+      ),
+      children
+    );
+  }
+);
 
-const placements = ["top", "bottom", "left", "right"];
 Tooltip.propTypes = {
-  /** The message to be displayed within the tooltip */
-  message: _propTypes.default.node.isRequired,
-
-  /** The id attribute to use for the tooltip */
-  id: _propTypes.default.string,
-
-  /** Whether to to show the Tooltip */
-  isVisible: _propTypes.default.bool,
-
-  /** Sets position of the tooltip */
-  position: _propTypes.default.oneOf(placements),
-
-  /** Defines the message type */
-  type: _propTypes.default.string,
-
-  /** Children elements */
-  children: _propTypes.default.node.isRequired,
-
-  /** Defines the size of the tooltip content */
-  size: _propTypes.default.oneOf(["medium", "large"]),
-  // Reference element, tooltip will be positioned in relation to this element
-  target: _propTypes.default.instanceOf(Element),
-
-  /** Override background color of the Tooltip, provide design token, any color from palette or any valid css color value. */
+  /**
+   * Override background color of the Tooltip, provide any color from palette or any valid css color value.
+   */
   bgColor: _propTypes.default.string,
-
-  /** Override font color of the Tooltip, provide design token, any color from palette or any valid css color value. */
+  /**
+   * Children elements
+   */
+  children: _propTypes.default.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.default.arrayOf(
+    _propTypes.default.oneOf(["bottom", "left", "right", "top"])
+  ),
+  /**
+   * Override font color of the Tooltip, provide any color from palette or any valid css color value.
+   */
   fontColor: _propTypes.default.string,
-
-  /** @ignore @private */
+  /**
+   * The id attribute to use for the tooltip
+   */
+  id: _propTypes.default.string,
+  inputSize: _propTypes.default.oneOf(["large", "medium", "small"]),
   isPartOfInput: _propTypes.default.bool,
-
-  /** @ignore @private */
-  inputSize: _propTypes.default.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.default.bool,
+  key: _propTypes.default.oneOfType([
+    _propTypes.default.number,
+    _propTypes.default.string,
+  ]),
+  /**
+   * The message to be displayed within the tooltip
+   */
+  message: _propTypes.default.node,
+  /**
+   * Sets position of the tooltip
+   */
+  position: _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
+  /**
+   * Defines the size of the tooltip content
+   */
+  size: _propTypes.default.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.default.string,
 };
+
+exports.Tooltip = Tooltip;
+Tooltip.displayName = "Tooltip";
 var _default = Tooltip;
-exports.default = _default;
+exports.default = _default;

package/lib/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/lib/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/lib/components/tooltip/tooltip.style.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
 var _color = require("../../style/utils/color");
@@ -29,7 +27,7 @@ const fadeIn = (0, _styledComponents.keyframes)`
   }
 `;
 
-const tooltipColor = (type, theme, bgColor) => {
+const tooltipColor = (theme, bgColor, type) => {
   if (bgColor) return (0, _color.toColor)(theme, bgColor);
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
@@ -68,14 +66,14 @@ const tooltipOffset = (position, inputSize, isPartOfInput) => {
   }
 };
 
-const StyledTooltipWrapper = _styledComponents.default.div`
+const StyledTooltip = _styledComponents.default.div`
   ${({
   position,
   size,
   theme,
   type,
   isPartOfInput,
-  inputSize,
+  inputSize = "medium",
   bgColor,
   fontColor
 }) => (0, _styledComponents.css)`
@@ -94,25 +92,12 @@ const StyledTooltipWrapper = _styledComponents.default.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.default.oneOf(["top", "bottom", "left", "right"]),
-  size: _propTypes.default.oneOf(["medium", "large"]),
-  theme: _propTypes.default.object,
-  type: _propTypes.default.string,
-  isPartOfInput: _propTypes.default.bool,
-  inputSize: _propTypes.default.oneOf(["small", "medium", "large"]),
-  bgColor: _propTypes.default.string,
-  fontColor: _propTypes.default.string
-};
-StyledTooltipWrapper.defaultProps = {
-  theme: _base.default,
-  size: "medium",
-  inputSize: "medium",
-  position: "top"
+StyledTooltip.defaultProps = {
+  theme: _base.default
 };
-var _default = StyledTooltipWrapper;
+var _default = StyledTooltip;
 exports.default = _default;

package/lib/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/lib/components/vertical-divider/vertical-divider.component.js

@@ -12,6 +12,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _menu = require("../menu/menu.component");
 
 var _verticalDivider = require("./vertical-divider.style");
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
 
 function _getRequireWildcardCache() {
   if (typeof WeakMap !== "function") return null;

package/lib/hooks/__internal__/useCharacterCount/index.d.ts

@@ -1,2 +1 @@
-export default useCharacterCount;
-declare function useCharacterCount(value: any, characterLimit: any, warnOverLimit?: boolean, enforceCharacterLimit?: boolean): any[];
+export { default } from "./useCharacterCount";

package/lib/hooks/__internal__/useCharacterCount/index.js

@@ -3,32 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _characterCount = _interopRequireDefault(require("../../../__internal__/character-count"));
-
-var _useLocale = _interopRequireDefault(require("../useLocale"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useCharacterCount.default;
+  }
+});
 
-const useCharacterCount = (value, characterLimit, warnOverLimit = false, enforceCharacterLimit = true) => {
-  const l = (0, _useLocale.default)();
-  const isOverLimit = (0, _react.useMemo)(() => value && value.length > parseInt(characterLimit, 10), [value, characterLimit]);
-  return [enforceCharacterLimit && characterLimit ? characterLimit : undefined, characterLimit ? /*#__PURE__*/_react.default.createElement(_characterCount.default, {
-    isOverLimit: isOverLimit && warnOverLimit,
-    value: getFormatNumber(value.length, l.locale()),
-    limit: getFormatNumber(characterLimit, l.locale()),
-    "data-element": "character-limit"
-  }) : null];
-};
+var _useCharacterCount = _interopRequireDefault(require("./useCharacterCount"));
 
-var _default = useCharacterCount;
-exports.default = _default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useCharacterCount/useCharacterCount.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const useCharacterCount: (value: string, characterLimit?: string | undefined, warnOverLimit?: boolean, enforceCharacterLimit?: boolean) => [string | undefined, JSX.Element | null];
+export default useCharacterCount;