carbon-react 102.21.0 → 102.22.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/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/loader/loader.component.d.ts

@@ -1,23 +1,27 @@
 export default Loader;
-declare function Loader({ isInsideButton, isActive, size, ...rest }: {
+declare function Loader({ "aria-label": ariaLabel, isInsideButton, isActive, size, ...rest }: {
     [x: string]: any;
+    "aria-label": any;
     isInsideButton: any;
     isActive: any;
     size: any;
 }): JSX.Element;
 declare namespace Loader {
-    namespace defaultProps {
-        const size: string;
-        const isInsideButton: boolean;
-        const isActive: boolean;
-    }
-    namespace propTypes {
-        const size_1: PropTypes.Requireable<string>;
-        export { size_1 as size };
-        const isInsideButton_1: PropTypes.Requireable<boolean>;
-        export { isInsideButton_1 as isInsideButton };
-        const isActive_1: PropTypes.Requireable<boolean>;
-        export { isActive_1 as isActive };
-    }
+    const defaultProps: {
+        size: string;
+        isInsideButton: boolean;
+        isActive: boolean;
+        "aria-label": string;
+    };
+    const propTypes: {
+        /** Specify an aria-label for the Loader component */
+        "aria-label": PropTypes.Requireable<string>;
+        /** Size of the loader. */
+        size: PropTypes.Requireable<string>;
+        /** Applies white color. */
+        isInsideButton: PropTypes.Requireable<boolean>;
+        /** Applies slate color. Available only when isInsideButton is true. */
+        isActive: PropTypes.Requireable<boolean>;
+    };
 }
 import PropTypes from "prop-types";

package/lib/components/loader/loader.component.js

@@ -26,12 +26,16 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const Loader = ({
+  "aria-label": ariaLabel,
   isInsideButton,
   isActive,
   size,
   ...rest
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({}, rest, (0, _tags.default)("loader", rest)), /*#__PURE__*/_react.default.createElement(_loaderSquare.default, {
+  return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
+    "aria-label": ariaLabel,
+    role: "progressbar"
+  }, (0, _tags.default)("loader", rest), rest), /*#__PURE__*/_react.default.createElement(_loaderSquare.default, {
     isInsideButton: isInsideButton,
     isActive: isActive,
     size: size
@@ -49,10 +53,14 @@ const Loader = ({
 Loader.defaultProps = {
   size: "medium",
   isInsideButton: false,
-  isActive: true
+  isActive: true,
+  "aria-label": "loader"
 };
 Loader.propTypes = { ...marginPropTypes,
 
+  /** Specify an aria-label for the Loader component */
+  "aria-label": _propTypes.default.string,
+
   /** Size of the loader. */
   size: _propTypes.default.oneOf(["small", "medium", "large"]),
 

package/lib/components/loader/loader.d.ts

@@ -1,6 +1,8 @@
 import { MarginProps } from "styled-system";
 
 export interface LoaderProps extends MarginProps {
+  /** Specify an aria-label for the Loader component */
+  "aria-label"?: string;
   /** Size of the loader. */
   size?: "small" | "medium" | "large";
   /** Applies white color. */

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/split-button/split-button-children.style.js

@@ -22,28 +22,28 @@ const StyledSplitButtonChildrenContainer = _styledComponents.default.div`
   theme,
   align
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.colors.secondary};
+    background-color: var(--colorsActionMajorYang100);
     min-width: ${({
   minWidth
 }) => minWidth}px;
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
+    box-shadow: var(--boxShadow100);
 
     ${_button.default} {
-      background-color: ${theme.colors.secondary};
-      border: 1px solid ${theme.colors.secondary};
-      color: ${theme.colors.white};
+      background-color: var(--colorsActionMajorYang100);
+      border: 1px solid var(--colorsActionMajorTransparent);
+      color: var(--colorsActionMajor500);
       display: block;
       margin-left: 0;
-      margin-top: 3px;
-      margin-bottom: 3px;
       min-width: 100%;
       text-align: ${align};
       z-index: ${theme.zIndex.overlay};
 
       &:focus,
       &:hover {
-        background-color: ${theme.colors.tertiary};
+        color: var(--colorsActionMajorYang100);
+        background-color: var(--colorsActionMajor600);
       }
 
       & + & {

package/lib/components/split-button/split-button-toggle.style.js

@@ -27,23 +27,32 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
   buttonType,
   disabled,
   displayed,
-  size,
-  theme
+  size
 }) => (0, _styledComponents.css)`
     ${!disabled && displayed ? (0, _styledComponents.css)`
-          background-color: ${theme.colors.secondary};
-          border-color: ${theme.colors.secondary};
+          background-color: var(--colorsActionMajor500);
+          border-color: var(--colorsActionMajor500);
 
           &,
           ${_icon.default} {
-            color: ${theme.colors.white};
+            color: var(--colorsActionMajorYang100);
           }
 
           &:focus {
-            border-left-color: ${theme.colors.secondary};
+            border-left-color: var(--colorsSemanticFocus500);
           }
         ` : ""}
-    ${!disabled && buttonType === "primary" && `border-left-color: ${theme.colors.secondary};`}
+    ${!disabled && buttonType === "primary" && `position: relative;
+      &::before {
+        content: '';
+        width: 2px;
+        height: 100%;
+        background: var(--colorsActionMajorYang100);
+        position: absolute;
+        left: -2px;
+        z-index: 2;
+      }  
+    `}
     ${buttonType === "secondary" && "border-left-width: 0;"}
     padding: 0 ${horizontalPaddingSizes[size]}px;
 

package/lib/components/split-button/split-button.style.js

@@ -25,9 +25,7 @@ const StyledSplitButton = _styledComponents.default.div`
     margin: 0;
 
     &:focus {
-      border: 3px solid ${({
-  theme
-}) => theme.colors.focus};
+      border: 3px solid var(--colorsSemanticFocus500);
       outline: none;
       margin: -1px;
     }

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": "102.21.0",
+  "version": "102.22.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {