carbon-react 103.0.0 → 103.2.3

package/lib/__internal__/popover/popover.component.js

@@ -13,11 +13,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _core = require("@popperjs/core");
 
-var _styledComponents = require("styled-components");
-
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 
-var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+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 }; }
 
@@ -34,11 +32,9 @@ const Popover = ({
   modifiers
 }) => {
   const elementDOM = (0, _react.useRef)();
-  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
 
   if (!elementDOM.current && !disablePortal) {
     elementDOM.current = document.createElement("div");
-    elementDOM.current.classList.add((0, _carbonScopedTokensProvider.tokensClassName)(theme === null || theme === void 0 ? void 0 : theme.name));
     document.body.appendChild(elementDOM.current);
   }
 
@@ -98,7 +94,7 @@ const Popover = ({
     return content;
   }
 
-  return /*#__PURE__*/_reactDom.default.createPortal(content, elementDOM.current);
+  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, content), elementDOM.current);
 };
 
 Popover.propTypes = {

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

@@ -1,5 +1,5 @@
 export const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledButton: import("styled-components").StyledComponent<typeof Button, any, import("../button").ButtonDefaultProps, never>;
+export const StyledButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
 export const StyledCrossIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
 import Button from "../button";

package/lib/components/badge/badge.style.js

@@ -37,9 +37,7 @@ const StyledButton = (0, _styledComponents.default)(_button.default)`
   top: -11px;
   right: -11px;
   margin-right: 0;
-  background: ${({
-  theme
-}) => theme.colors.white};
+  background: var(--colorsActionMajorYang100);
 
   ::-moz-focus-inner {
     border: none;
@@ -47,9 +45,7 @@ const StyledButton = (0, _styledComponents.default)(_button.default)`
 
   &:hover,
   &:focus {
-    background: ${({
-  theme
-}) => theme.colors.primary};
+    background: var(--colorsActionMajor500);
     border: none;
     ${StyledCounter} {
       display: none;
@@ -63,9 +59,7 @@ const StyledButton = (0, _styledComponents.default)(_button.default)`
 
       :before {
         font-size: 16px;
-        color: ${({
-  theme
-}) => theme.colors.white};
+        color: var(--colorsActionMajorYang100);
       }
     }
   }

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

@@ -1,9 +1,9 @@
 export default Decimal;
 declare function Decimal({ align, defaultValue, precision, inputWidth, readOnly, onChange, onBlur, onKeyPress, id, name, allowEmptyValue, required, locale, value, ...rest }: {
     [x: string]: any;
-    align?: string | undefined;
+    align: any;
     defaultValue: any;
-    precision?: number | undefined;
+    precision: any;
     inputWidth: any;
     readOnly: any;
     onChange: any;
@@ -11,7 +11,7 @@ declare function Decimal({ align, defaultValue, precision, inputWidth, readOnly,
     onKeyPress: any;
     id: any;
     name: any;
-    allowEmptyValue?: boolean | undefined;
+    allowEmptyValue: any;
     required: any;
     locale: any;
     value: any;
@@ -77,5 +77,10 @@ declare namespace Decimal {
         /** Aria label for rendered help component */
         helpAriaLabel: PropTypes.Requireable<string>;
     };
+    namespace defaultProps {
+        const precision: number;
+        const allowEmptyValue: boolean;
+        const align: string;
+    }
 }
 import PropTypes from "prop-types";

package/lib/components/decimal/decimal.component.js

@@ -30,9 +30,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const Decimal = ({
-  align = "right",
+  align,
   defaultValue,
-  precision = 2,
+  precision,
   inputWidth,
   readOnly,
   onChange,
@@ -40,7 +40,7 @@ const Decimal = ({
   onKeyPress,
   id,
   name,
-  allowEmptyValue = false,
+  allowEmptyValue,
   required,
   locale,
   value,
@@ -309,5 +309,10 @@ Decimal.propTypes = {
   /** Aria label for rendered help component */
   helpAriaLabel: _propTypes.default.string
 };
+Decimal.defaultProps = {
+  precision: 2,
+  allowEmptyValue: false,
+  align: "right"
+};
 var _default = Decimal;
 exports.default = _default;

package/lib/components/portal/portal.js

@@ -11,13 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _styledComponents = require("styled-components");
-
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
 var _browser = _interopRequireDefault(require("../../__internal__/utils/helpers/browser"));
 
-var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+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 }; }
 
@@ -33,7 +31,6 @@ const Portal = ({
 }) => {
   const [portalNode, setPortalNode] = (0, _react.useState)(null);
   const uniqueId = (0, _react.useMemo)(() => (0, _guid.default)(), []);
-  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
   (0, _react.useEffect)(() => {
     if (onReposition) {
       onReposition();
@@ -68,7 +65,7 @@ const Portal = ({
       setPortalNode(node);
     } else if (!node) {
       node = document.createElement("div");
-      node.classList.add(portalClassName, (0, _carbonScopedTokensProvider.tokensClassName)((theme === null || theme === void 0 ? void 0 : theme.name) || ""));
+      node.classList.add(portalClassName);
       node.setAttribute("data-portal-exit", uniqueId);
 
       if (id !== undefined) {
@@ -99,7 +96,7 @@ const Portal = ({
 
   return /*#__PURE__*/_react.default.createElement("span", {
     "data-portal-entrance": uniqueId
-  }, /*#__PURE__*/_reactDom.default.createPortal(children, getPortalContainer()));
+  }, /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, children), getPortalContainer()));
 };
 
 Portal.propTypes = {

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

@@ -1,6 +1,12 @@
 export default ProgressTracker;
-declare function ProgressTracker({ 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, progress, showDefaultLabels, currentProgressLabel, maxProgressLabel, orientation, direction, labelsPosition, ...rest }: {
     [x: string]: any;
+    "aria-label"?: string | undefined;
+    "aria-describedby": any;
+    "aria-valuenow": any;
+    "aria-valuemin": any;
+    "aria-valuemax": any;
+    "aria-valuetext": any;
     size?: string | undefined;
     progress?: number | undefined;
     showDefaultLabels?: boolean | undefined;
@@ -11,15 +17,40 @@ declare function ProgressTracker({ size, progress, showDefaultLabels, currentPro
     labelsPosition: any;
 }): JSX.Element;
 declare namespace ProgressTracker {
-    namespace propTypes {
-        const size: PropTypes.Requireable<string>;
-        const progress: PropTypes.Requireable<number>;
-        const showDefaultLabels: PropTypes.Requireable<boolean>;
-        const currentProgressLabel: PropTypes.Requireable<string>;
-        const maxProgressLabel: PropTypes.Requireable<string>;
-        const orientation: PropTypes.Requireable<string>;
-        const direction: PropTypes.Requireable<string>;
-        const labelsPosition: PropTypes.Requireable<string>;
-    }
+    const propTypes: {
+        /** Specifies an aria label to the component */
+        "aria-label": PropTypes.Requireable<string>;
+        /** Specifies the aria describedby for the component */
+        "aria-describedby": PropTypes.Requireable<string>;
+        /** The value of progress to be read out to the user. */
+        "aria-valuenow": PropTypes.Requireable<number>;
+        /** The minimum value of the progress tracker */
+        "aria-valuemin": PropTypes.Requireable<number>;
+        /** The maximum value of the progress tracker */
+        "aria-valuemax": PropTypes.Requireable<number>;
+        /** Prop to define the human readable text alternative of aria-valuenow
+         * if aria-valuenow is not a number
+         */
+        "aria-valuetext": PropTypes.Requireable<string>;
+        /** Size of the progress bar. */
+        size: PropTypes.Requireable<string>;
+        /** Current progress (percentage). */
+        progress: PropTypes.Requireable<number>;
+        /** Flag to control whether the default value labels (as percentages) should be rendered. */
+        showDefaultLabels: PropTypes.Requireable<boolean>;
+        /** Value to display as current progress. */
+        currentProgressLabel: PropTypes.Requireable<string>;
+        /** Value to display as the maximum progress limit. */
+        maxProgressLabel: PropTypes.Requireable<string>;
+        /** The orientation of the component. */
+        orientation: PropTypes.Requireable<string>;
+        /** The direction the bar should move as progress increases, only applies in vertical orientation. */
+        direction: PropTypes.Requireable<string>;
+        /**
+         * The position the value label are rendered in.
+         * Top/bottom apply to horizontal and left/right to vertical orientation.
+         */
+        labelsPosition: PropTypes.Requireable<string>;
+    };
 }
 import PropTypes from "prop-types";

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

@@ -24,6 +24,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const ProgressTracker = ({
+  "aria-label": ariaLabel = "progress tracker",
+  "aria-describedby": ariaDescribedBy,
+  "aria-valuenow": ariaValueNow,
+  "aria-valuemin": ariaValueMin,
+  "aria-valuemax": ariaValueMax,
+  "aria-valuetext": ariaValueText,
   size = "medium",
   progress = 0,
   showDefaultLabels = false,
@@ -63,7 +69,15 @@ const ProgressTracker = ({
   return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressTracker, _extends({
     size: size,
     isVertical: isVertical
-  }, rest, (0, _tags.default)("progress-bar", rest)), prefixLabels && renderValueLabels(), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
+  }, rest, (0, _tags.default)("progress-bar", rest), {
+    role: "progressbar",
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-valuenow": ariaValueNow,
+    "aria-valuemin": ariaValueMin,
+    "aria-valuemax": ariaValueMax,
+    "aria-valuetext": ariaValueText
+  }), prefixLabels && renderValueLabels(), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
     direction: isVertical ? direction : undefined,
     isVertical: isVertical,
     size: size
@@ -76,6 +90,26 @@ const ProgressTracker = ({
 
 ProgressTracker.propTypes = { ...marginPropTypes,
 
+  /** Specifies an aria label to the component */
+  "aria-label": _propTypes.default.string,
+
+  /** Specifies the aria describedby for the component */
+  "aria-describedby": _propTypes.default.string,
+
+  /** The value of progress to be read out to the user. */
+  "aria-valuenow": _propTypes.default.number,
+
+  /** The minimum value of the progress tracker */
+  "aria-valuemin": _propTypes.default.number,
+
+  /** The maximum value of the progress tracker */
+  "aria-valuemax": _propTypes.default.number,
+
+  /** Prop to define the human readable text alternative of aria-valuenow
+   * if aria-valuenow is not a number
+   */
+  "aria-valuetext": _propTypes.default.string,
+
   /** Size of the progress bar. */
   size: _propTypes.default.oneOf(["small", "medium", "large"]),
 

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

@@ -1,6 +1,19 @@
 import { MarginProps } from "styled-system";
 
 export interface ProgressBarProps extends MarginProps {
+  /** Specifies an aria-label to the component */
+  "aria-label"?: string;
+  /** Specifies the aria-describedby for the component */
+  "aria-describedby"?: string;
+  /** The value of progress to be read out to the user. */
+  "aria-valuenow"?: number;
+  /** The minimum value of the progress tracker */
+  "aria-valuemin"?: number;
+  /** The maximum value of the progress tracker */
+  "aria-valueMax"?: number;
+  /** Prop to define the human readable text alternative of aria-valuenow
+   * if aria-valuenow is not a number */
+  "aria-valuetext"?: string;
   /** Size of the progressBar. */
   size?: "small" | "medium" | "large";
   /** Current progress (percentage). */

package/lib/components/tooltip/tooltip.component.js

@@ -11,15 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _headless = _interopRequireDefault(require("@tippyjs/react/headless"));
 
-var _styledComponents = require("styled-components");
-
 var _tooltip = _interopRequireDefault(require("./tooltip.style"));
 
 var _tooltipPointer = _interopRequireDefault(require("./tooltip-pointer.style"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
-var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+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 }; }
 
@@ -47,12 +45,10 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const tooltipRef = (0, _react.useRef)(ref || null);
-  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
 
   const tooltip = (attrs, content) => {
     const currentPosition = attrs["data-placement"] || position;
-    return /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
-      className: (0, _carbonScopedTokensProvider.tokensClassName)(theme === null || theme === void 0 ? void 0 : theme.name),
+    return /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
       "data-element": "tooltip",
       role: "tooltip",
       tabIndex: "-1",
@@ -75,7 +71,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
       "data-popper-arrow": "",
       "data-element": "tooltip-pointer",
       bgColor: bgColor
-    })), /*#__PURE__*/_react.default.createElement("div", null, content));
+    })), /*#__PURE__*/_react.default.createElement("div", null, content)));
   };
 
   return /*#__PURE__*/_react.default.createElement(_headless.default, _extends({

package/lib/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.d.ts

@@ -1,6 +1,8 @@
-export function tokensClassName(theme: any): string;
-export const GlobalTokens: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
 export default CarbonScopedTokensProvider;
-declare function CarbonScopedTokensProvider({ children }: {
-    children: any;
-}): JSX.Element;
+/**
+ *
+ * Converts theme properties to css variables form and set them locally for
+ * given scope
+ *
+ */
+declare const CarbonScopedTokensProvider: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js

@@ -3,20 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.GlobalTokens = exports.tokensClassName = void 0;
+exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _themes = require("../../themes");
 
 var _generateCssVariables = _interopRequireDefault(require("../generate-css-variables.util"));
 
-var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-
-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 }; }
 
 /**
@@ -25,37 +19,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * given scope
  *
  */
-const activeThemes = {};
-const carbonInstanceId = (0, _guid.default)();
-
-const kebabCase = input => input && input.toString().toLowerCase().match(/\w*/gm).filter(Boolean).join("-");
-
-const tokensClassName = theme => `sage-design-tokens-${kebabCase(theme)}-${carbonInstanceId}`;
-
-exports.tokensClassName = tokensClassName;
-const GlobalTokens = (0, _styledComponents.createGlobalStyle)`
-  ${({
-  theme
-}) => {
-  const className = tokensClassName(theme.name);
-  activeThemes[className] = activeThemes[className] || (0, _generateCssVariables.default)(theme.compatibility);
-  return Object.entries(activeThemes).reduce((acc, [name, definitions]) => `${acc} .${name} { ${definitions} }`, "");
-}}`;
-exports.GlobalTokens = GlobalTokens;
-const TokensProviderWrapper = _styledComponents.default.div.attrs(({
-  theme
-}) => ({
-  className: tokensClassName(theme.name)
-}))`
+const CarbonScopedTokensProvider = _styledComponents.default.div`
   margin: 0;
   padding: 0;
   width: auto;
   display: inline;
-`;
-
-const CarbonScopedTokensProvider = ({
-  children
-}) => /*#__PURE__*/_react.default.createElement(TokensProviderWrapper, null, /*#__PURE__*/_react.default.createElement(GlobalTokens, null), children);
 
+  ${({
+  theme
+}) => (0, _generateCssVariables.default)(theme.compatibility)}
+`;
+CarbonScopedTokensProvider.defaultProps = {
+  theme: _themes.baseTheme
+};
 var _default = CarbonScopedTokensProvider;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "103.0.0",
+  "version": "103.2.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {