carbon-react 110.10.2 → 110.11.0

package/esm/components/link-preview/link-preview.style.js

@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
-import PreviewBars, { StyledPreview } from "../preview/preview.style";
+import { StyledPreview } from "../preview/preview.style";
+import { StyledPreviewPlaceholder } from "../preview/__internal__/preview-placeholder.style";
 const StyledLinkPreview = styled.a`
   display: flex;
   margin: 8px;
@@ -43,11 +44,11 @@ const StyledPreviewWrapper = styled.div`
       }
     `}
 
-  ${PreviewBars}:first-of-type {
+  ${StyledPreviewPlaceholder}:first-of-type {
     margin-top: 8px;
   }
 
-  ${PreviewBars}:not(:first-of-type) {
+  ${StyledPreviewPlaceholder}:not(:first-of-type) {
     margin-top: 16px;
   }
 `;

package/esm/components/preview/__internal__/preview-placeholder.component.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { StyledPreviewPlaceholderProps } from "./preview-placeholder.style";
+export interface PreviewPlaceholderProps extends StyledPreviewPlaceholderProps {
+    index: number;
+    /** The number of lines to render. */
+    lines: number;
+    loading?: boolean;
+}
+declare const PreviewPlaceholder: ({ height, index, lines, width, ...props }: PreviewPlaceholderProps) => JSX.Element;
+export default PreviewPlaceholder;

package/esm/components/preview/__internal__/preview-placeholder.component.js

@@ -0,0 +1,29 @@
+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 PropTypes from "prop-types";
+import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
+import { StyledPreviewPlaceholder } from "./preview-placeholder.style";
+
+const PreviewPlaceholder = ({
+  height,
+  index,
+  lines,
+  width,
+  ...props
+}) => {
+  const isLastLine = lines > 1 && lines === index;
+  return /*#__PURE__*/React.createElement(StyledPreviewPlaceholder, _extends({
+    height: height,
+    width: !width && isLastLine ? "80%" : width
+  }, tagComponent("preview", props)));
+};
+
+PreviewPlaceholder.propTypes = {
+  "height": PropTypes.string,
+  "index": PropTypes.number.isRequired,
+  "lines": PropTypes.number.isRequired,
+  "loading": PropTypes.bool,
+  "width": PropTypes.string
+};
+export default PreviewPlaceholder;

package/esm/components/preview/__internal__/preview-placeholder.style.d.ts

@@ -0,0 +1,7 @@
+export interface StyledPreviewPlaceholderProps {
+    /** A custom height to be applied to the component. */
+    height?: string;
+    /** A custom width */
+    width?: string;
+}
+export declare const StyledPreviewPlaceholder: import("styled-components").StyledComponent<"span", any, StyledPreviewPlaceholderProps, never>;

package/esm/components/preview/__internal__/preview-placeholder.style.js

@@ -0,0 +1,22 @@
+import styled, { keyframes } from "styled-components";
+const shimmer = keyframes`
+  0% { opacity:0.1 }
+  70% { opacity:0.6 }
+  100% { opacity:0.1 }
+`;
+export const StyledPreviewPlaceholder = styled.span`
+  animation: ${shimmer} 2s ease infinite;
+  background: var(--colorsUtilityMajor150);
+  display: block;
+  height: ${({
+  height
+}) => height || "15px"};
+  opacity: 0.6;
+  width: ${({
+  width
+}) => width || "100%"};
+
+  & + & {
+    margin-top: 3px;
+  }
+`;

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

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { PreviewPlaceholderProps } from "./__internal__/preview-placeholder.component";
+export interface PreviewProps extends Partial<Omit<PreviewPlaceholderProps, "index">>, MarginProps {
+    /** Children content to render in the component. */
+    children?: React.ReactNode;
+    loading?: boolean;
+}
+export declare const Preview: ({ children, loading, lines, ...props }: PreviewProps) => JSX.Element;
+export default Preview;

package/esm/components/preview/preview.component.js

@@ -2,76 +2,196 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import PreviewStyle, { StyledPreview } from "./preview.style";
+import PreviewPlaceholder from "./__internal__/preview-placeholder.component";
+import { StyledPreview } from "./preview.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
-const Preview = props => {
+const Preview = ({
+  children,
+  loading,
+  lines = 1,
+  ...props
+}) => {
   const marginProps = filterStyledSystemMarginProps(props);
+  const hasPlaceholder = loading === undefined ? !children : loading;
 
-  if (isLoading(props.loading, props.children)) {
-    const previews = [];
+  if (hasPlaceholder) {
+    const placeholders = [];
 
-    for (let i = 1; i <= props.lines; i++) {
-      previews.push(createPreview(props, i));
+    for (let i = 1; i <= lines; i++) {
+      placeholders.push( /*#__PURE__*/React.createElement(PreviewPlaceholder, _extends({
+        key: i,
+        index: i,
+        lines: lines
+      }, props)));
     }
 
-    return /*#__PURE__*/React.createElement(StyledPreview, marginProps, previews);
+    return /*#__PURE__*/React.createElement(StyledPreview, marginProps, placeholders);
   }
 
-  return /*#__PURE__*/React.createElement(StyledPreview, marginProps, props.children);
+  return /*#__PURE__*/React.createElement(StyledPreview, marginProps, children);
 };
 
-function isLoading(loading, children) {
-  if (typeof loading !== "undefined") {
-    return loading;
-  }
-
-  return !children;
-}
-
-function createPreview(allProps, index) {
-  const {
-    height,
-    lines
-  } = allProps;
-  let {
-    width
-  } = allProps;
-
-  if (!width && lines > 1 && lines === index) {
-    width = "80%";
-  }
-
-  return /*#__PURE__*/React.createElement(PreviewStyle, _extends({
-    key: index,
-    style: {
-      height,
-      width
-    }
-  }, tagComponent("preview", allProps)));
-}
-
-Preview.propTypes = { ...marginPropTypes,
-
-  /** Children content to render in the component. */
-  children: PropTypes.node,
-
-  /** A custom height to be applied to the component. */
-  height: PropTypes.string,
-
-  /** The number of lines to render. */
-  lines: PropTypes.number,
-
-  /* Provides more control over when in a loading state. */
-  loading: PropTypes.bool,
-
-  /** A custom width */
-  width: PropTypes.string
-};
-Preview.defaultProps = {
-  lines: 1
+Preview.propTypes = {
+  "children": PropTypes.node,
+  "height": PropTypes.string,
+  "lines": PropTypes.number,
+  "loading": PropTypes.bool,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "width": PropTypes.string
 };
+export { Preview };
 export default Preview;

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

@@ -0,0 +1,2 @@
+declare const StyledPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledPreview };

package/esm/components/preview/preview.style.js

@@ -1,27 +1,11 @@
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
-const shimmer = keyframes`
-  0% { opacity:0.1 }
-  70% { opacity:0.6 }
-  100% { opacity:0.1 }
-`;
-const PreviewStyle = styled.span`
-  animation: ${shimmer} 2s ease infinite;
-  background: var(--colorsUtilityMajor150);
-  display: block;
-  height: 15px;
-  opacity: 0.6;
-  width: 100%;
-
-  & + & {
-    margin-top: 3px;
-  }
-`;
-export const StyledPreview = styled.div`
+const StyledPreview = styled.div`
   ${margin}
 `;
 StyledPreview.defaultProps = {
   theme: baseTheme
-};
-export default PreviewStyle;
+}; // eslint-disable-next-line import/prefer-default-export
+
+export { StyledPreview };

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

@@ -13,8 +13,8 @@ const ProgressTracker = ({
   "aria-label": ariaLabel = "progress tracker",
   "aria-describedby": ariaDescribedBy,
   "aria-valuenow": ariaValueNow,
-  "aria-valuemin": ariaValueMin,
-  "aria-valuemax": ariaValueMax,
+  "aria-valuemin": ariaValueMin = 0,
+  "aria-valuemax": ariaValueMax = 100,
   "aria-valuetext": ariaValueText,
   size = "medium",
   length = "256px",
@@ -68,6 +68,7 @@ const ProgressTracker = ({
     }, label(maxProgressLabel, "100%"))));
   };
 
+  const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
   return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
     size: size,
     length: length,
@@ -76,7 +77,7 @@ const ProgressTracker = ({
     role: "progressbar",
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
-    "aria-valuenow": ariaValueNow,
+    "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
     "aria-valuemin": ariaValueMin,
     "aria-valuemax": ariaValueMax,
     "aria-valuetext": ariaValueText

package/esm/components/tabs/tabs.d.ts

@@ -34,7 +34,7 @@ export interface TabsProps extends MarginProps {
    * The `id` property should match the `tabId`s for the rendered Tabs.
    */
   validationStatusOverride?: {
-    id?: {
+    [id?: string]: {
       error?: boolean;
       warning?: boolean;
       info?: boolean;

package/lib/components/link-preview/link-preview.style.js

@@ -7,7 +7,9 @@ exports.StyledUrl = exports.StyledDescription = exports.StyledTitle = exports.St
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _preview = _interopRequireWildcard(require("../preview/preview.style"));
+var _preview = require("../preview/preview.style");
+
+var _previewPlaceholder = require("../preview/__internal__/preview-placeholder.style");
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
@@ -58,11 +60,11 @@ const StyledPreviewWrapper = _styledComponents.default.div`
       }
     `}
 
-  ${_preview.default}:first-of-type {
+  ${_previewPlaceholder.StyledPreviewPlaceholder}:first-of-type {
     margin-top: 8px;
   }
 
-  ${_preview.default}:not(:first-of-type) {
+  ${_previewPlaceholder.StyledPreviewPlaceholder}:not(:first-of-type) {
     margin-top: 16px;
   }
 `;

package/lib/components/preview/__internal__/preview-placeholder.component.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { StyledPreviewPlaceholderProps } from "./preview-placeholder.style";
+export interface PreviewPlaceholderProps extends StyledPreviewPlaceholderProps {
+    index: number;
+    /** The number of lines to render. */
+    lines: number;
+    loading?: boolean;
+}
+declare const PreviewPlaceholder: ({ height, index, lines, width, ...props }: PreviewPlaceholderProps) => JSX.Element;
+export default PreviewPlaceholder;

package/lib/components/preview/__internal__/preview-placeholder.component.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
+
+var _previewPlaceholder = require("./preview-placeholder.style");
+
+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 PreviewPlaceholder = ({
+  height,
+  index,
+  lines,
+  width,
+  ...props
+}) => {
+  const isLastLine = lines > 1 && lines === index;
+  return /*#__PURE__*/_react.default.createElement(_previewPlaceholder.StyledPreviewPlaceholder, _extends({
+    height: height,
+    width: !width && isLastLine ? "80%" : width
+  }, (0, _tags.default)("preview", props)));
+};
+
+PreviewPlaceholder.propTypes = {
+  "height": _propTypes.default.string,
+  "index": _propTypes.default.number.isRequired,
+  "lines": _propTypes.default.number.isRequired,
+  "loading": _propTypes.default.bool,
+  "width": _propTypes.default.string
+};
+var _default = PreviewPlaceholder;
+exports.default = _default;

package/lib/components/preview/__internal__/preview-placeholder.style.d.ts

@@ -0,0 +1,7 @@
+export interface StyledPreviewPlaceholderProps {
+    /** A custom height to be applied to the component. */
+    height?: string;
+    /** A custom width */
+    width?: string;
+}
+export declare const StyledPreviewPlaceholder: import("styled-components").StyledComponent<"span", any, StyledPreviewPlaceholderProps, never>;

package/lib/components/preview/__internal__/preview-placeholder.style.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledPreviewPlaceholder = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+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 shimmer = (0, _styledComponents.keyframes)`
+  0% { opacity:0.1 }
+  70% { opacity:0.6 }
+  100% { opacity:0.1 }
+`;
+const StyledPreviewPlaceholder = _styledComponents.default.span`
+  animation: ${shimmer} 2s ease infinite;
+  background: var(--colorsUtilityMajor150);
+  display: block;
+  height: ${({
+  height
+}) => height || "15px"};
+  opacity: 0.6;
+  width: ${({
+  width
+}) => width || "100%"};
+
+  & + & {
+    margin-top: 3px;
+  }
+`;
+exports.StyledPreviewPlaceholder = StyledPreviewPlaceholder;

package/lib/components/preview/index.d.ts

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { PreviewPlaceholderProps } from "./__internal__/preview-placeholder.component";
+export interface PreviewProps extends Partial<Omit<PreviewPlaceholderProps, "index">>, MarginProps {
+    /** Children content to render in the component. */
+    children?: React.ReactNode;
+    loading?: boolean;
+}
+export declare const Preview: ({ children, loading, lines, ...props }: PreviewProps) => JSX.Element;
+export default Preview;

package/lib/components/preview/preview.component.js

@@ -3,95 +3,209 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Preview = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+var _previewPlaceholder = _interopRequireDefault(require("./__internal__/preview-placeholder.component"));
 
-var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
-
-var _preview = _interopRequireWildcard(require("./preview.style"));
+var _preview = require("./preview.style");
 
 var _utils = require("../../style/utils");
 
-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 }; }
 
 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);
-
-const Preview = props => {
+const Preview = ({
+  children,
+  loading,
+  lines = 1,
+  ...props
+}) => {
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(props);
+  const hasPlaceholder = loading === undefined ? !children : loading;
 
-  if (isLoading(props.loading, props.children)) {
-    const previews = [];
+  if (hasPlaceholder) {
+    const placeholders = [];
 
-    for (let i = 1; i <= props.lines; i++) {
-      previews.push(createPreview(props, i));
+    for (let i = 1; i <= lines; i++) {
+      placeholders.push( /*#__PURE__*/_react.default.createElement(_previewPlaceholder.default, _extends({
+        key: i,
+        index: i,
+        lines: lines
+      }, props)));
     }
 
-    return /*#__PURE__*/_react.default.createElement(_preview.StyledPreview, marginProps, previews);
+    return /*#__PURE__*/_react.default.createElement(_preview.StyledPreview, marginProps, placeholders);
   }
 
-  return /*#__PURE__*/_react.default.createElement(_preview.StyledPreview, marginProps, props.children);
+  return /*#__PURE__*/_react.default.createElement(_preview.StyledPreview, marginProps, children);
 };
 
-function isLoading(loading, children) {
-  if (typeof loading !== "undefined") {
-    return loading;
-  }
-
-  return !children;
-}
-
-function createPreview(allProps, index) {
-  const {
-    height,
-    lines
-  } = allProps;
-  let {
-    width
-  } = allProps;
-
-  if (!width && lines > 1 && lines === index) {
-    width = "80%";
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_preview.default, _extends({
-    key: index,
-    style: {
-      height,
-      width
-    }
-  }, (0, _tags.default)("preview", allProps)));
-}
-
-Preview.propTypes = { ...marginPropTypes,
-
-  /** Children content to render in the component. */
-  children: _propTypes.default.node,
-
-  /** A custom height to be applied to the component. */
-  height: _propTypes.default.string,
-
-  /** The number of lines to render. */
-  lines: _propTypes.default.number,
-
-  /* Provides more control over when in a loading state. */
-  loading: _propTypes.default.bool,
-
-  /** A custom width */
-  width: _propTypes.default.string
-};
-Preview.defaultProps = {
-  lines: 1
+exports.Preview = Preview;
+Preview.propTypes = {
+  "children": _propTypes.default.node,
+  "height": _propTypes.default.string,
+  "lines": _propTypes.default.number,
+  "loading": _propTypes.default.bool,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "width": _propTypes.default.string
 };
 var _default = Preview;
 exports.default = _default;

package/lib/components/preview/preview.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledPreview };

package/lib/components/preview/preview.style.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledPreview = void 0;
+exports.StyledPreview = void 0;
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
@@ -13,33 +13,10 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
 
 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 shimmer = (0, _styledComponents.keyframes)`
-  0% { opacity:0.1 }
-  70% { opacity:0.6 }
-  100% { opacity:0.1 }
-`;
-const PreviewStyle = _styledComponents.default.span`
-  animation: ${shimmer} 2s ease infinite;
-  background: var(--colorsUtilityMajor150);
-  display: block;
-  height: 15px;
-  opacity: 0.6;
-  width: 100%;
-
-  & + & {
-    margin-top: 3px;
-  }
-`;
 const StyledPreview = _styledComponents.default.div`
   ${_styledSystem.margin}
 `;
 exports.StyledPreview = StyledPreview;
 StyledPreview.defaultProps = {
   theme: _base.default
-};
-var _default = PreviewStyle;
-exports.default = _default;
+}; // eslint-disable-next-line import/prefer-default-export

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

@@ -33,8 +33,8 @@ const ProgressTracker = ({
   "aria-label": ariaLabel = "progress tracker",
   "aria-describedby": ariaDescribedBy,
   "aria-valuenow": ariaValueNow,
-  "aria-valuemin": ariaValueMin,
-  "aria-valuemax": ariaValueMax,
+  "aria-valuemin": ariaValueMin = 0,
+  "aria-valuemax": ariaValueMax = 100,
   "aria-valuetext": ariaValueText,
   size = "medium",
   length = "256px",
@@ -88,6 +88,7 @@ const ProgressTracker = ({
     }, label(maxProgressLabel, "100%"))));
   };
 
+  const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
   return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressTracker, _extends({
     size: size,
     length: length,
@@ -96,7 +97,7 @@ const ProgressTracker = ({
     role: "progressbar",
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
-    "aria-valuenow": ariaValueNow,
+    "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
     "aria-valuemin": ariaValueMin,
     "aria-valuemax": ariaValueMax,
     "aria-valuetext": ariaValueText

package/lib/components/tabs/tabs.d.ts

@@ -34,7 +34,7 @@ export interface TabsProps extends MarginProps {
    * The `id` property should match the `tabId`s for the rendered Tabs.
    */
   validationStatusOverride?: {
-    id?: {
+    [id?: string]: {
       error?: boolean;
       warning?: boolean;
       info?: boolean;

package/package.json

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

package/esm/components/preview/preview.d.ts

@@ -1,19 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-export interface PreviewProps extends MarginProps {
-  /** A custom height to be applied to the component. */
-  height?: string;
-  /** The number of lines to render. */
-  lines?: number;
-  /* Provides more control over when in a loading state. */
-  loading?: boolean;
-  /** A custom width */
-  width?: string;
-}
-
-declare function Preview(
-  props: React.PropsWithChildren<PreviewProps>
-): JSX.Element;
-
-export default Preview;

package/lib/components/preview/preview.d.ts

@@ -1,19 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-export interface PreviewProps extends MarginProps {
-  /** A custom height to be applied to the component. */
-  height?: string;
-  /** The number of lines to render. */
-  lines?: number;
-  /* Provides more control over when in a loading state. */
-  loading?: boolean;
-  /** A custom width */
-  width?: string;
-}
-
-declare function Preview(
-  props: React.PropsWithChildren<PreviewProps>
-): JSX.Element;
-
-export default Preview;