carbon-react 103.2.0 → 104.2.0

package/lib/components/icon/icon.component.js

@@ -63,7 +63,8 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     tooltipPosition: tooltipPositionFromContext,
     focusable: focusableFromContext,
     tooltipVisible: tooltipVisibleFromContext,
-    disabled: disabledFromContext
+    disabled: disabledFromContext,
+    target
   } = (0, _react.useContext)(_tooltipProvider.TooltipContext);
   /** Return Icon type with overrides */
 
@@ -131,7 +132,8 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
       inputSize: inputSize,
       bgColor: tooltipBgColor,
       fontColor: tooltipFontColor,
-      flipOverrides: tooltipFlipOverrides
+      flipOverrides: tooltipFlipOverrides,
+      target: target
     }, icon);
   }
 

package/lib/components/icon-button/icon-button.component.js

@@ -38,13 +38,8 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   disabled,
   ...rest
 }, ref) => {
+  const [internalRef, setInternalRef] = (0, _react.useState)(null);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
-  const hasIconWithTooltip = !!_react.default.Children.toArray(children).find(child => {
-    var _child$props;
-
-    return child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.tooltipMessage;
-  });
-  const [tooltipVisible, setTooltipVisible] = (0, _react.useState)(undefined);
 
   const onKeyDown = e => {
     if (_events.default.isEnterKey(e) || _events.default.isSpaceKey(e)) {
@@ -59,26 +54,23 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
     onAction(e);
   };
 
-  const handleTooltipVisibility = (ev, callbackName) => {
-    setTooltipVisible(["onFocus", "onMouseEnter"].includes(callbackName));
-    if (rest[callbackName]) rest[callbackName](ev);
-  };
-
   return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({}, rest, {
     "aria-label": ariaLabel,
     onKeyDown: onKeyDown,
     onClick: handleOnAction,
-    ref: ref,
+    ref: reference => {
+      if (reference) {
+        setInternalRef(reference);
+        if (!ref) return;
+        if (typeof ref === "object") ref.current = reference;
+        if (typeof ref === "function") ref(reference);
+      }
+    },
     disabled: disabled
-  }, !disabled && hasIconWithTooltip && {
-    onFocus: ev => handleTooltipVisibility(ev, "onFocus"),
-    onBlur: ev => handleTooltipVisibility(ev, "onBlur"),
-    onMouseEnter: ev => handleTooltipVisibility(ev, "onMouseEnter"),
-    onMouseLeave: ev => handleTooltipVisibility(ev, "onMouseLeave")
   }, marginProps), /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     disabled: disabled,
-    tooltipVisible: tooltipVisible,
-    focusable: false
+    focusable: false,
+    target: internalRef
   }, children));
 });
 

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/step-sequence/step-sequence-item/step-sequence-item.style.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,19 +21,15 @@ const StepSequenceItemStyle = _styledComponents.default.li`
   flex-grow: 1;
   text-align: right;
   list-style-type: none;
-  color: ${({
-  theme
-}) => theme.disabled.disabled};
+  color: var(--colorsUtilityYin055);
 
   &::before {
     content: "";
     flex-grow: 1;
     display: block;
-    height: 1px;
+    height: var(--sizing025);
     margin: 0 16px;
-    background-color: ${({
-  theme
-}) => theme.disabled.disabled};
+    background-color: var(--colorsUtilityYin055);
   }
 
   & span {
@@ -46,9 +40,7 @@ const StepSequenceItemStyle = _styledComponents.default.li`
 
   ${_icon.default} {
     margin-right: 8px;
-    color: ${({
-  theme
-}) => theme.colors.primary};
+    color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
   }
 
   &:first-child {
@@ -60,24 +52,25 @@ const StepSequenceItemStyle = _styledComponents.default.li`
   }
 
   ${({
-  theme,
   status
 }) => status === "current" && (0, _styledComponents.css)`
-      color: ${theme.text.color};
+      color: var(--colorsUtilityYin090);
 
       &::before {
-        background-color: ${theme.colors.primary};
+        background-color: var(--colorsUtilityYin090);
       }
     `}
 
   ${({
-  theme,
   status
 }) => status === "complete" && (0, _styledComponents.css)`
-      color: ${theme.stepSequence.completedText};
+      color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
 
       &::before {
-        background-color: ${theme.colors.primary};
+        background-color: var(
+          --colorsBaseTheme,
+          var(--colorsSemanticPositive500)
+        );
       }
     `}
 
@@ -89,14 +82,11 @@ const StepSequenceItemStyle = _styledComponents.default.li`
 
       &::before {
         flex-grow: 0;
-        width: 1px;
-        height: 24px;
+        width: var(--sizing025);
+        height: var(--sizing300);
         margin: 12px 8px;
       }
     `}
 `;
-StepSequenceItemStyle.defaultProps = {
-  theme: _base.default
-};
 var _default = StepSequenceItemStyle;
 exports.default = _default;

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 }; }
 
@@ -44,15 +42,14 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   bgColor,
   fontColor,
   flipOverrides,
+  target,
   ...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 +72,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({
@@ -85,6 +82,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
     visible: isVisible
   }, {
     render: attrs => tooltip(attrs, message),
+    reference: target,
     popperOptions: {
       modifiers: [...(flipOverrides ? [{
         name: "flip",
@@ -123,6 +121,8 @@ Tooltip.propTypes = {
 
   /** Defines the size of the tooltip content */
   size: _propTypes.default.oneOf(["medium", "large"]),
+  // Reference element, tooltip will be positioned in relation to this element
+  target: _propTypes.default.instanceOf(Element),
 
   /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
   bgColor: _propTypes.default.string,

package/lib/components/tooltip/tooltip.d.ts

@@ -25,6 +25,7 @@ export interface TooltipProps {
    * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
    */
   flipOverrides?: ["top" | "bottom" | "left" | "right"];
+  target?: Element;
 }
 
 export interface TooltipInternalProps extends TooltipProps {

package/lib/locales/date-fns-locales/index.d.ts

@@ -0,0 +1 @@
+export * from "date-fns/locale";

package/lib/locales/date-fns-locales/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _locale = require("date-fns/locale");
+
+Object.keys(_locale).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _locale[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _locale[key];
+    }
+  });
+});

package/lib/locales/en-gb.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _dateFnsLocales = require("./date-fns-locales");
+
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 
 var _default = {
@@ -24,10 +26,7 @@ var _default = {
     yes: () => "Yes"
   },
   date: {
-    formats: {
-      inputs: () => ["DDMMYYYY", "DDMMYY", "DD/MM/YYYY", "DD/MM/YY", "MMDDYYYY", "MMDDYY", "MM/DD/YYYY", "MM/DD/YY", "DDMMM", "DD/MMM", "DDMM", "DD/MM", "YYYYMMDD", "YYYY/MM/DD", "D/MM/YYYY", "D/M/YYYY", "D/MM/YY", "D/M/YY", "DD/M/YYYY", "DD/M/YY", "DD/M/YY", "D/MMM/YYYY", "DD/MMM/YYYY", "DD/MMM/YY", "D/MMMM/YYYY", "DD/MMMM/YYYY", "DD/MMMM/YY", "MMM/YYYY", "MMM/YY", "MMMM/YYYY", "MMMM/YY", "Do/MMM/YYYY", "Do/MMM/YY", "Do/M/YYYY", "Do/M/YY", "Do/MM/YYYY", "Do/MM/YY", "Do/MMMM/YYYY", "Do/MMMM/YY", "MMMM/Do/YYYY", "MMMM/Do/YY", "MMMM/Do", "MMM/Do/YYYY", "MMM/Do/YY", "MMM/Do", "Do/MMM", "D/MMM", "D/MM", "D/M", "Do/MMMM", "Do/MM", "Do/M", "D/MMMM", "DD/MMMM", "DD/MMM", "DD/M", "MMM", "MMMM", "DD", "Do", "D"],
-      javascript: () => "DD/MM/YYYY"
-    }
+    dateFnsLocale: () => _dateFnsLocales.enGB
   },
   errors: {
     messages: {

package/lib/locales/locale.d.ts

@@ -1,3 +1,5 @@
+import { Locale as DateFnsLocale } from "date-fns";
+
 interface Locale {
   locale: () => string;
   actions: {
@@ -15,10 +17,7 @@ interface Locale {
     yes: () => string;
   };
   date: {
-    formats: {
-      inputs: () => string[];
-      javascript: () => string;
-    };
+    dateFnsLocale: () => DateFnsLocale;
   };
   errors: {
     messages: {

package/lib/locales/pl-pl.d.ts

@@ -1,5 +1,5 @@
 import Locale from ".";
 
-declare const PlPl: Omit<Locale, "date">;
+declare const PlPl: Locale;
 
 export default PlPl;

package/lib/locales/pl-pl.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _dateFnsLocales = require("./date-fns-locales");
+
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
 
 var _default = {
@@ -23,6 +25,9 @@ var _default = {
     no: () => "Nie",
     yes: () => "Tak"
   },
+  date: {
+    dateFnsLocale: () => _dateFnsLocales.pl
+  },
   errors: {
     messages: {
       formSummary:

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/lib/style/themes/aegean/aegean-theme.config.d.ts

@@ -18,6 +18,7 @@ declare function _default(palette: any): {
         colorsActionMajor500: any;
         colorsActionMajor600: any;
         colorsActionMajor150: any;
+        colorsBaseTheme: any;
     };
 };
 export default _default;

package/lib/style/themes/aegean/aegean-theme.config.js

@@ -32,7 +32,8 @@ var _default = palette => {
       return {
         colorsActionMajor500: this.colors.primary,
         colorsActionMajor600: this.colors.secondary,
-        colorsActionMajor150: this.colors.loadingBarBackground
+        colorsActionMajor150: this.colors.loadingBarBackground,
+        colorsBaseTheme: this.colors.primary
       };
     }