carbon-react 106.2.0 → 106.3.0

package/README.md

@@ -1,4 +1,4 @@
-# Carbon [![npm](https://img.shields.io/npm/v/carbon-react.svg)](https://www.npmjs.com/package/carbon-react)
+# Carbon [![npm](https://img.shields.io/npm/v/carbon-react.svg)](https://www.npmjs.com/package/carbon-react) [![Cypress](https://github.com/Sage/carbon/actions/workflows/cypress.yml/badge.svg)](https://github.com/Sage/carbon/actions/workflows/cypress.yml)
 
 Carbon is a [React](https://facebook.github.io/react/) component library developed by Sage.
 

package/esm/components/dialog-full-screen/dialog-full-screen.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Modal, { ModalProps } from "../modal/modal";
+import { ModalProps } from "../modal/modal";
 
 export interface DialogFullScreenProps extends ModalProps {
   /** Prop to specify the aria-describedby property of the DialogFullscreen component */
@@ -18,7 +18,7 @@ export interface DialogFullScreenProps extends ModalProps {
   /** Child elements */
   children?: React.ReactNode;
   /** Reference to the scrollable content element */
-  contentRef:
+  contentRef?:
     | React.MutableRefObject<HTMLElement>
     | (() => React.MutableRefObject<HTMLElement>);
   /** Disables auto focus functionality on child elements */

package/esm/components/form/form.style.js

@@ -9,6 +9,7 @@ import { FieldsetStyle } from "../fieldset/fieldset.style";
 import StyledInlineInputs from "../inline-inputs/inline-inputs.style";
 import { FORM_BUTTON_ALIGNMENTS } from "./form.config";
 import StyledSearch from "../search/search.style";
+import StyledTextarea from "../textarea/textarea.style";
 export const StyledFormContent = styled.div`
   ${({
   stickyFooter
@@ -72,6 +73,7 @@ export const StyledForm = styled.form`
   fieldSpacing
 }) => css`
       &
+        ${StyledTextarea},
         ${StyledFormField},
         ${StyledFieldset},
         ${FieldsetStyle},
@@ -80,6 +82,11 @@ export const StyledForm = styled.form`
         margin-bottom: ${formBottomMargins(fieldSpacing)};
       }
 
+      ${StyledTextarea}
+      ${StyledFormField} {
+        margin-bottom: 4px;
+      }
+
       ${StyledInlineInputs} {
         ${StyledFormField} {
           margin-bottom: 0;

package/esm/components/progress-tracker/progress-tracker.component.d.ts

@@ -1,5 +1,5 @@
 export default ProgressTracker;
-declare function ProgressTracker({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, progress, showDefaultLabels, currentProgressLabel, maxProgressLabel, orientation, direction, labelsPosition, ...rest }: {
+declare function ProgressTracker({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, length, progress, showDefaultLabels, currentProgressLabel, maxProgressLabel, orientation, direction, labelsPosition, ...rest }: {
     [x: string]: any;
     "aria-label"?: string | undefined;
     "aria-describedby": any;
@@ -8,6 +8,7 @@ declare function ProgressTracker({ "aria-label": ariaLabel, "aria-describedby":
     "aria-valuemax": any;
     "aria-valuetext": any;
     size?: string | undefined;
+    length?: string | undefined;
     progress?: number | undefined;
     showDefaultLabels?: boolean | undefined;
     currentProgressLabel: any;
@@ -34,6 +35,8 @@ declare namespace ProgressTracker {
         "aria-valuetext": PropTypes.Requireable<string>;
         /** Size of the progress bar. */
         size: PropTypes.Requireable<string>;
+        /** Length of the progress bar, any valid css string. */
+        length: PropTypes.Requireable<string>;
         /** Current progress (percentage). */
         progress: PropTypes.Requireable<number>;
         /** Flag to control whether the default value labels (as percentages) should be rendered. */

package/esm/components/progress-tracker/progress-tracker.component.js

@@ -1,11 +1,12 @@
 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 from "react";
+import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue } from "./progress-tracker.style";
+import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const ProgressTracker = ({
@@ -16,6 +17,7 @@ const ProgressTracker = ({
   "aria-valuemax": ariaValueMax,
   "aria-valuetext": ariaValueText,
   size = "medium",
+  length = "256px",
   progress = 0,
   showDefaultLabels = false,
   currentProgressLabel,
@@ -25,8 +27,23 @@ const ProgressTracker = ({
   labelsPosition,
   ...rest
 }) => {
+  const barRef = useRef();
+  const [barLength, setBarLength] = useState(0);
   const isVertical = orientation === "vertical";
   const prefixLabels = !isVertical && labelsPosition !== "bottom" || isVertical && labelsPosition === "left";
+  const updateBarLength = useCallback(() => {
+    if (orientation === "horizontal") {
+      setBarLength(`${barRef.current.offsetWidth}px`);
+    } else {
+      setBarLength(`${barRef.current.offsetHeight}px`);
+    }
+  }, [barRef, orientation]);
+  useLayoutEffect(() => {
+    updateBarLength();
+  }, [barRef, orientation, updateBarLength]);
+  useResizeObserver(barRef, () => {
+    updateBarLength();
+  });
 
   const renderValueLabels = () => {
     if (!showDefaultLabels && !currentProgressLabel && !maxProgressLabel) {
@@ -53,6 +70,7 @@ const ProgressTracker = ({
 
   return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
     size: size,
+    length: length,
     isVertical: isVertical
   }, rest, tagComponent("progress-bar", rest), {
     role: "progressbar",
@@ -65,10 +83,12 @@ const ProgressTracker = ({
   }), prefixLabels && renderValueLabels(), /*#__PURE__*/React.createElement(StyledProgressBar, {
     direction: isVertical ? direction : undefined,
     isVertical: isVertical,
-    size: size
+    size: size,
+    ref: barRef
   }, /*#__PURE__*/React.createElement(InnerBar, {
     isVertical: isVertical,
     size: size,
+    length: barLength,
     progress: progress
   })), !prefixLabels && renderValueLabels());
 };
@@ -98,6 +118,9 @@ ProgressTracker.propTypes = { ...marginPropTypes,
   /** Size of the progress bar. */
   size: PropTypes.oneOf(["small", "medium", "large"]),
 
+  /** Length of the progress bar, any valid css string. */
+  length: PropTypes.string,
+
   /** Current progress (percentage). */
   progress: PropTypes.number,
 

package/esm/components/progress-tracker/progress-tracker.config.d.ts

@@ -1,2 +1 @@
-export const OUTER_TRACKER_LENGTH: "256px";
 export const PROGRESS_TRACKER_SIZES: string[];

package/esm/components/progress-tracker/progress-tracker.config.js

@@ -1,2 +1,2 @@
-export const OUTER_TRACKER_LENGTH = "256px";
+/* eslint-disable import/prefer-default-export */
 export const PROGRESS_TRACKER_SIZES = ["small", "medium", "large"];

package/esm/components/progress-tracker/progress-tracker.d.ts

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 
-export interface ProgressBarProps extends MarginProps {
+export interface ProgressTrackerProps extends MarginProps {
   /** Specifies an aria-label to the component */
   "aria-label"?: string;
   /** Specifies the aria-describedby for the component */
@@ -16,6 +16,8 @@ export interface ProgressBarProps extends MarginProps {
   "aria-valuetext"?: string;
   /** Size of the progressBar. */
   size?: "small" | "medium" | "large";
+  /** Length of the progress bar, any valid css string. */
+  length?: string;
   /** Current progress (percentage). */
   progress?: number;
   /** Flag to control whether the default value labels (as percentages) should be rendered. */
@@ -35,6 +37,6 @@ export interface ProgressBarProps extends MarginProps {
   labelsPosition?: "top" | "bottom" | "left" | "right";
 }
 
-declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+declare function ProgressTracker(props: ProgressTrackerProps): JSX.Element;
 
-export default ProgressBar;
+export default ProgressTracker;

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -2,20 +2,21 @@ import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
-import { OUTER_TRACKER_LENGTH, PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";
+import { PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";
 const StyledProgressTracker = styled.div`
   ${margin}
   text-align: center;
   white-space: nowrap;
 
   ${({
-  isVertical
+  isVertical,
+  length
 }) => css`
     ${!isVertical && `
-      width: ${OUTER_TRACKER_LENGTH};
+      width: ${length};
     `}
     ${isVertical && `
-      height: ${OUTER_TRACKER_LENGTH};
+      height: ${length};
       display: flex;
     `}
   `}
@@ -94,19 +95,20 @@ const InnerBar = styled.span`
   ${({
   isVertical,
   progress,
-  size
+  size,
+  length
 }) => css`
     position: absolute;
     left: 0;
     background-color: ${getInnerBarColour(progress)};
 
     ${!isVertical && css`
-      width: calc(${OUTER_TRACKER_LENGTH} * ${progress / 100});
+      width: calc(${length} * ${progress / 100});
       min-width: 2px;
       height: ${getHeight(size)};
     `}
     ${isVertical && css`
-      height: calc(${OUTER_TRACKER_LENGTH} * ${progress / 100});
+      height: calc(${length} * ${progress / 100});
       min-height: 2px;
       width: ${getHeight(size)};
     `}

package/lib/components/dialog-full-screen/dialog-full-screen.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Modal, { ModalProps } from "../modal/modal";
+import { ModalProps } from "../modal/modal";
 
 export interface DialogFullScreenProps extends ModalProps {
   /** Prop to specify the aria-describedby property of the DialogFullscreen component */
@@ -18,7 +18,7 @@ export interface DialogFullScreenProps extends ModalProps {
   /** Child elements */
   children?: React.ReactNode;
   /** Reference to the scrollable content element */
-  contentRef:
+  contentRef?:
     | React.MutableRefObject<HTMLElement>
     | (() => React.MutableRefObject<HTMLElement>);
   /** Disables auto focus functionality on child elements */

package/lib/components/form/form.style.js

@@ -27,6 +27,8 @@ var _form = require("./form.config");
 
 var _search = _interopRequireDefault(require("../search/search.style"));
 
+var _textarea = _interopRequireDefault(require("../textarea/textarea.style"));
+
 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; }
@@ -98,6 +100,7 @@ const StyledForm = _styledComponents.default.form`
   fieldSpacing
 }) => (0, _styledComponents.css)`
       &
+        ${_textarea.default},
         ${_formField.default},
         ${_fieldset.StyledFieldset},
         ${_fieldset2.FieldsetStyle},
@@ -106,6 +109,11 @@ const StyledForm = _styledComponents.default.form`
         margin-bottom: ${formBottomMargins(fieldSpacing)};
       }
 
+      ${_textarea.default}
+      ${_formField.default} {
+        margin-bottom: 4px;
+      }
+
       ${_inlineInputs.default} {
         ${_formField.default} {
           margin-bottom: 0;

package/lib/components/progress-tracker/progress-tracker.component.d.ts

@@ -1,5 +1,5 @@
 export default ProgressTracker;
-declare function ProgressTracker({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, progress, showDefaultLabels, currentProgressLabel, maxProgressLabel, orientation, direction, labelsPosition, ...rest }: {
+declare function ProgressTracker({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, length, progress, showDefaultLabels, currentProgressLabel, maxProgressLabel, orientation, direction, labelsPosition, ...rest }: {
     [x: string]: any;
     "aria-label"?: string | undefined;
     "aria-describedby": any;
@@ -8,6 +8,7 @@ declare function ProgressTracker({ "aria-label": ariaLabel, "aria-describedby":
     "aria-valuemax": any;
     "aria-valuetext": any;
     size?: string | undefined;
+    length?: string | undefined;
     progress?: number | undefined;
     showDefaultLabels?: boolean | undefined;
     currentProgressLabel: any;
@@ -34,6 +35,8 @@ declare namespace ProgressTracker {
         "aria-valuetext": PropTypes.Requireable<string>;
         /** Size of the progress bar. */
         size: PropTypes.Requireable<string>;
+        /** Length of the progress bar, any valid css string. */
+        length: PropTypes.Requireable<string>;
         /** Current progress (percentage). */
         progress: PropTypes.Requireable<number>;
         /** Flag to control whether the default value labels (as percentages) should be rendered. */

package/lib/components/progress-tracker/progress-tracker.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -17,8 +17,14 @@ var _utils = require("../../style/utils");
 
 var _progressTracker = require("./progress-tracker.style");
 
+var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
+
 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 _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 marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
@@ -31,6 +37,7 @@ const ProgressTracker = ({
   "aria-valuemax": ariaValueMax,
   "aria-valuetext": ariaValueText,
   size = "medium",
+  length = "256px",
   progress = 0,
   showDefaultLabels = false,
   currentProgressLabel,
@@ -40,8 +47,23 @@ const ProgressTracker = ({
   labelsPosition,
   ...rest
 }) => {
+  const barRef = (0, _react.useRef)();
+  const [barLength, setBarLength] = (0, _react.useState)(0);
   const isVertical = orientation === "vertical";
   const prefixLabels = !isVertical && labelsPosition !== "bottom" || isVertical && labelsPosition === "left";
+  const updateBarLength = (0, _react.useCallback)(() => {
+    if (orientation === "horizontal") {
+      setBarLength(`${barRef.current.offsetWidth}px`);
+    } else {
+      setBarLength(`${barRef.current.offsetHeight}px`);
+    }
+  }, [barRef, orientation]);
+  (0, _react.useLayoutEffect)(() => {
+    updateBarLength();
+  }, [barRef, orientation, updateBarLength]);
+  (0, _useResizeObserver.default)(barRef, () => {
+    updateBarLength();
+  });
 
   const renderValueLabels = () => {
     if (!showDefaultLabels && !currentProgressLabel && !maxProgressLabel) {
@@ -68,6 +90,7 @@ const ProgressTracker = ({
 
   return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressTracker, _extends({
     size: size,
+    length: length,
     isVertical: isVertical
   }, rest, (0, _tags.default)("progress-bar", rest), {
     role: "progressbar",
@@ -80,10 +103,12 @@ const ProgressTracker = ({
   }), prefixLabels && renderValueLabels(), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
     direction: isVertical ? direction : undefined,
     isVertical: isVertical,
-    size: size
+    size: size,
+    ref: barRef
   }, /*#__PURE__*/_react.default.createElement(_progressTracker.InnerBar, {
     isVertical: isVertical,
     size: size,
+    length: barLength,
     progress: progress
   })), !prefixLabels && renderValueLabels());
 };
@@ -113,6 +138,9 @@ ProgressTracker.propTypes = { ...marginPropTypes,
   /** Size of the progress bar. */
   size: _propTypes.default.oneOf(["small", "medium", "large"]),
 
+  /** Length of the progress bar, any valid css string. */
+  length: _propTypes.default.string,
+
   /** Current progress (percentage). */
   progress: _propTypes.default.number,
 

package/lib/components/progress-tracker/progress-tracker.config.d.ts

@@ -1,2 +1 @@
-export const OUTER_TRACKER_LENGTH: "256px";
 export const PROGRESS_TRACKER_SIZES: string[];

package/lib/components/progress-tracker/progress-tracker.config.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PROGRESS_TRACKER_SIZES = exports.OUTER_TRACKER_LENGTH = void 0;
-const OUTER_TRACKER_LENGTH = "256px";
-exports.OUTER_TRACKER_LENGTH = OUTER_TRACKER_LENGTH;
+exports.PROGRESS_TRACKER_SIZES = void 0;
+
+/* eslint-disable import/prefer-default-export */
 const PROGRESS_TRACKER_SIZES = ["small", "medium", "large"];
 exports.PROGRESS_TRACKER_SIZES = PROGRESS_TRACKER_SIZES;

package/lib/components/progress-tracker/progress-tracker.d.ts

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 
-export interface ProgressBarProps extends MarginProps {
+export interface ProgressTrackerProps extends MarginProps {
   /** Specifies an aria-label to the component */
   "aria-label"?: string;
   /** Specifies the aria-describedby for the component */
@@ -16,6 +16,8 @@ export interface ProgressBarProps extends MarginProps {
   "aria-valuetext"?: string;
   /** Size of the progressBar. */
   size?: "small" | "medium" | "large";
+  /** Length of the progress bar, any valid css string. */
+  length?: string;
   /** Current progress (percentage). */
   progress?: number;
   /** Flag to control whether the default value labels (as percentages) should be rendered. */
@@ -35,6 +37,6 @@ export interface ProgressBarProps extends MarginProps {
   labelsPosition?: "top" | "bottom" | "left" | "right";
 }
 
-declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+declare function ProgressTracker(props: ProgressTrackerProps): JSX.Element;
 
-export default ProgressBar;
+export default ProgressTracker;

package/lib/components/progress-tracker/progress-tracker.style.js

@@ -27,13 +27,14 @@ const StyledProgressTracker = _styledComponents.default.div`
   white-space: nowrap;
 
   ${({
-  isVertical
+  isVertical,
+  length
 }) => (0, _styledComponents.css)`
     ${!isVertical && `
-      width: ${_progressTracker.OUTER_TRACKER_LENGTH};
+      width: ${length};
     `}
     ${isVertical && `
-      height: ${_progressTracker.OUTER_TRACKER_LENGTH};
+      height: ${length};
       display: flex;
     `}
   `}
@@ -116,19 +117,20 @@ const InnerBar = _styledComponents.default.span`
   ${({
   isVertical,
   progress,
-  size
+  size,
+  length
 }) => (0, _styledComponents.css)`
     position: absolute;
     left: 0;
     background-color: ${getInnerBarColour(progress)};
 
     ${!isVertical && (0, _styledComponents.css)`
-      width: calc(${_progressTracker.OUTER_TRACKER_LENGTH} * ${progress / 100});
+      width: calc(${length} * ${progress / 100});
       min-width: 2px;
       height: ${getHeight(size)};
     `}
     ${isVertical && (0, _styledComponents.css)`
-      height: calc(${_progressTracker.OUTER_TRACKER_LENGTH} * ${progress / 100});
+      height: calc(${length} * ${progress / 100});
       min-height: 2px;
       width: ${getHeight(size)};
     `}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "106.2.0",
+  "version": "106.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -111,7 +111,7 @@
     "conventional-changelog-conventionalcommits": "^4.5.0",
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
-    "cypress": "^9.5.2",
+    "cypress": "^9.6.0",
     "cypress-axe": "^0.14.0",
     "cypress-cucumber-preprocessor": "^4.3.1",
     "cypress-each": "^1.11.0",