carbon-react 119.9.0 → 119.9.2

package/README.md

@@ -4,7 +4,7 @@ Carbon is a [React](https://facebook.github.io/react/) component library develop
 
 ## Getting started
 
-Our [getting started guide](docs/getting-started.stories.mdx) provides instructions on how to install and use the Carbon library.
+Our [getting started guide](https://carbon.sage.com/?path=/story/getting-started-installation--page) provides instructions on how to install and use the Carbon library.
 
 ## Examples
 

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

@@ -3,7 +3,11 @@ import { MarginProps } from "styled-system";
 import { IconType } from "../icon";
 export declare type PortraitShapes = "circle" | "square";
 export declare type PortraitSizes = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
-export interface PortraitBaseProps extends MarginProps {
+export interface PortraitProps extends MarginProps {
+    /** An email address registered with Gravatar. */
+    gravatar?: string;
+    /** A custom image URL. */
+    src?: string;
     /** The size of the Portrait. */
     size?: PortraitSizes;
     /** The `alt` HTML string. */
@@ -35,16 +39,5 @@ export interface PortraitBaseProps extends MarginProps {
     /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
 }
-export interface PortraitWithGravatar extends PortraitBaseProps {
-    /** An email address registered with Gravatar. */
-    gravatar?: string;
-    src?: never;
-}
-export interface PortraitWithSrc extends PortraitBaseProps {
-    /** A custom image URL. */
-    src?: string;
-    gravatar?: never;
-}
-export declare type PortraitProps = PortraitWithGravatar | PortraitWithSrc;
 export declare const Portrait: ({ alt, darkBackground, gravatar, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
 export default Portrait;

package/esm/components/portrait/portrait.component.js

@@ -1,6 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useEffect, useState, useContext } from "react";
 import PropTypes from "prop-types";
+import invariant from "invariant";
 import Tooltip from "../tooltip";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import PortraitGravatar from "./portrait-gravatar.component";
@@ -34,6 +35,7 @@ export const Portrait = _ref => {
     roundedCornersOptOut
   } = useContext(RoundedCornersOptOutContext);
   const defaultShape = roundedCornersOptOut ? "square" : "circle";
+  !!(src && gravatar) ? process.env.NODE_ENV !== "production" ? invariant(false, "The `src` prop cannot be used in conjunction with the `gravatar` prop." + " Please use one or the other.") : invariant(false) : void 0;
   useEffect(() => {
     setExternalError(false);
   }, [gravatar, src]);

package/esm/components/textarea/textarea.component.js

@@ -92,9 +92,18 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const expandTextarea = () => {
     const textarea = internalRef.current;
     if (textarea?.scrollHeight && textarea?.scrollHeight > minHeight.current) {
+      // need to reset scroll position of the nearest parent which scrolls
+      let scrollElement = textarea;
+      while (scrollElement && !scrollElement?.scrollTop) {
+        scrollElement = scrollElement?.parentElement || null;
+      }
+      const scrollPosition = scrollElement?.scrollTop;
       textarea.style.height = "0px";
       // Set the height so all content is shown
       textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
+      if (scrollElement && scrollPosition) {
+        scrollElement.scrollTop = scrollPosition;
+      }
     }
   };
   const {
@@ -126,10 +135,14 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     if (expandable) {
       window.addEventListener("resize", expandTextarea);
       minHeight.current = internalRef?.current?.clientHeight || 0;
+      // need to also run expandTextarea when the Sage UI font completes loading, to prevent strange scroll
+      // behaviour when it only loads after the component is rendered
+      document.fonts?.addEventListener("loadingdone", expandTextarea);
     }
     return () => {
       if (expandable) {
         window.removeEventListener("resize", expandTextarea);
+        document.fonts?.removeEventListener("loadingdone", expandTextarea);
       }
     };
   }, [expandable]);

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

@@ -3,7 +3,11 @@ import { MarginProps } from "styled-system";
 import { IconType } from "../icon";
 export declare type PortraitShapes = "circle" | "square";
 export declare type PortraitSizes = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
-export interface PortraitBaseProps extends MarginProps {
+export interface PortraitProps extends MarginProps {
+    /** An email address registered with Gravatar. */
+    gravatar?: string;
+    /** A custom image URL. */
+    src?: string;
     /** The size of the Portrait. */
     size?: PortraitSizes;
     /** The `alt` HTML string. */
@@ -35,16 +39,5 @@ export interface PortraitBaseProps extends MarginProps {
     /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
 }
-export interface PortraitWithGravatar extends PortraitBaseProps {
-    /** An email address registered with Gravatar. */
-    gravatar?: string;
-    src?: never;
-}
-export interface PortraitWithSrc extends PortraitBaseProps {
-    /** A custom image URL. */
-    src?: string;
-    gravatar?: never;
-}
-export declare type PortraitProps = PortraitWithGravatar | PortraitWithSrc;
 export declare const Portrait: ({ alt, darkBackground, gravatar, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
 export default Portrait;

package/lib/components/portrait/portrait.component.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Portrait = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _invariant = _interopRequireDefault(require("invariant"));
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _portraitGravatar = _interopRequireDefault(require("./portrait-gravatar.component"));
@@ -43,6 +44,7 @@ const Portrait = _ref => {
     roundedCornersOptOut
   } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const defaultShape = roundedCornersOptOut ? "square" : "circle";
+  !!(src && gravatar) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "The `src` prop cannot be used in conjunction with the `gravatar` prop." + " Please use one or the other.") : (0, _invariant.default)(false) : void 0;
   (0, _react.useEffect)(() => {
     setExternalError(false);
   }, [gravatar, src]);

package/lib/components/textarea/textarea.component.js

@@ -101,9 +101,18 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const expandTextarea = () => {
     const textarea = internalRef.current;
     if (textarea?.scrollHeight && textarea?.scrollHeight > minHeight.current) {
+      // need to reset scroll position of the nearest parent which scrolls
+      let scrollElement = textarea;
+      while (scrollElement && !scrollElement?.scrollTop) {
+        scrollElement = scrollElement?.parentElement || null;
+      }
+      const scrollPosition = scrollElement?.scrollTop;
       textarea.style.height = "0px";
       // Set the height so all content is shown
       textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
+      if (scrollElement && scrollPosition) {
+        scrollElement.scrollTop = scrollPosition;
+      }
     }
   };
   const {
@@ -135,10 +144,14 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     if (expandable) {
       window.addEventListener("resize", expandTextarea);
       minHeight.current = internalRef?.current?.clientHeight || 0;
+      // need to also run expandTextarea when the Sage UI font completes loading, to prevent strange scroll
+      // behaviour when it only loads after the component is rendered
+      document.fonts?.addEventListener("loadingdone", expandTextarea);
     }
     return () => {
       if (expandable) {
         window.removeEventListener("resize", expandTextarea);
+        document.fonts?.removeEventListener("loadingdone", expandTextarea);
       }
     };
   }, [expandable]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "119.9.0",
+  "version": "119.9.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",