carbon-react 101.4.0 → 101.4.4

package/lib/__internal__/date/date.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _moment = _interopRequireDefault(require("moment"));
 
+require("moment/min/locales");
+
 var _lodash = require("lodash");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -161,14 +163,12 @@ const DateHelper = {
    * formats - given accepted formats
    * locale - current locale
    * strict - moment js strict mode
-   * sanitize - should value be sanitized before parsing
    */
   _defaultMomentOptions: (locale, formats) => {
     return {
       locale,
       formats,
-      strict: true,
-      sanitize: true
+      strict: true
     };
   },
 
@@ -185,7 +185,7 @@ const DateHelper = {
     value,
     options,
     locale,
-    formats,
+    formats = [],
     format
   }) {
     const opts = (0, _lodash.merge)(DateHelper._defaultMomentOptions(locale, formats), options, {
@@ -193,8 +193,7 @@ const DateHelper = {
       formats,
       format
     });
-    const val = opts.sanitize ? DateHelper.sanitizeDateInput(value) : value;
-    return (0, _moment.default)(val, [format, ...opts.formats], opts.locale, opts.strict);
+    return (0, _moment.default)(value, [format, isoDateFormat, ...opts.formats], opts.locale, opts.strict);
   },
 
   formatDateToCurrentLocale({
@@ -206,9 +205,6 @@ const DateHelper = {
     return DateHelper.formatValue({
       value,
       formatTo: format,
-      options: {
-        formats: [format]
-      },
       locale,
       formats,
       format

package/lib/__internal__/label/label.component.js

@@ -65,8 +65,9 @@ const Label = ({
   pl,
   isRequired
 }) => {
-  const [isFocused, setFocus] = (0, _react.useState)(false);
   const {
+    hasFocus,
+    hasMouseOver,
     onMouseEnter,
     onMouseLeave
   } = (0, _react.useContext)(_inputBehaviour.InputContext);
@@ -86,11 +87,6 @@ const Label = ({
   };
 
   const icon = () => {
-    const wrapperProps = {
-      onFocus: () => setFocus(true),
-      onBlur: () => setFocus(false)
-    };
-
     if (useValidationIcon && shouldDisplayValidationIcon({
       error,
       warning,
@@ -113,11 +109,11 @@ const Label = ({
       }));
     }
 
-    return help && /*#__PURE__*/_react.default.createElement(_iconWrapper.default, wrapperProps, /*#__PURE__*/_react.default.createElement(_help.default, {
+    return help && /*#__PURE__*/_react.default.createElement(_iconWrapper.default, null, /*#__PURE__*/_react.default.createElement(_help.default, {
       tooltipId: tooltipId,
       tabIndex: helpTabIndex,
       type: helpIcon,
-      isFocused: isFocused
+      isFocused: hasFocus || hasMouseOver
     }, help));
   };
 

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

@@ -15,6 +15,8 @@ var _core = require("@popperjs/core");
 
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 
+var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+
 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; }
@@ -33,6 +35,7 @@ const Popover = ({
 
   if (!elementDOM.current && !disablePortal) {
     elementDOM.current = document.createElement("div");
+    elementDOM.current.classList.add(_carbonScopedTokensProvider.tokensClassName);
     document.body.appendChild(elementDOM.current);
   }
 

package/lib/__internal__/validations/validation-icon.component.js

@@ -91,7 +91,8 @@ const ValidationIcon = ({
     onBlur: e => {
       setTriggeredByIcon(false);
       if (onBlur) onBlur(e);
-    }
+    },
+    isPartOfInput: isPartOfInput
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_icon.default, {
     key: `${validationType}-icon`,
     type: validationType,

package/lib/__internal__/validations/validation-icon.style.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
@@ -15,9 +15,13 @@ var _icon = _interopRequireDefault(require("../../components/icon/icon.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+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 ValidationIconStyle = _styledComponents.default.span`
   background: none;
-  cursor: pointer;
+  cursor: default;
   display: flex;
   align-items: center;
   margin-top: 0;
@@ -25,6 +29,12 @@ const ValidationIconStyle = _styledComponents.default.span`
   border: 0;
   outline: none;
 
+  ${({
+  isPartOfInput
+}) => isPartOfInput && (0, _styledComponents.css)`
+      cursor: pointer;
+    `}
+
   ${_icon.default}:before {
     color: ${({
   validationType,

package/lib/components/date/date.component.js

@@ -167,13 +167,11 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
         _this.reformatVisibleDate();
 
         if (_this.props.onBlur && !_this.state.isDatePickerOpen) {
-          const dateWithSlashes = _date.default.sanitizeDateInput(_this.state.visibleValue);
-
           const event = _this.buildCustomEvent({
             target: _this.input,
             type: "blur"
           }, _date.default.formatValue({
-            value: dateWithSlashes,
+            value: _this.state.visibleValue,
             ..._this.localeData
           }));
 
@@ -365,10 +363,8 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
       } = _this.props;
       const value = ev.target.value.formattedValue || ev.target.value;
 
-      const dateWithSlashes = _date.default.sanitizeDateInput(value);
-
       const isValidDate = _date.default.isValidDate({
-        value: dateWithSlashes,
+        value,
         ..._this.localeData
       });
 
@@ -378,7 +374,7 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
 
       if (isValidDate || _this.canBeEmptyValues(value)) {
         isoDateString = _date.default.formatValue({
-          value: dateWithSlashes,
+          value,
           ..._this.localeData
         });
 
@@ -440,9 +436,6 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "buildCustomEvent", (ev, isoFormattedValue) => {
-      const {
-        type
-      } = ev;
       const {
         id,
         name,
@@ -477,7 +470,7 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
           ...(validRawValue && {
             rawValue: isoFormattedValue
           }),
-          ...(type === "blur" && {
+          ...(!validRawValue && {
             formattedValue: value,
             rawValue: value
           })
@@ -488,15 +481,19 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderDatePicker", dateRangeProps => {
       if (!_this.state.isDatePickerOpen) return null;
-      let {
+      const {
         visibleValue
       } = _this.state;
+      let isoValue = "";
 
-      if (!_date.default.isValidDate({
+      if (_date.default.isValidDate({
         value: visibleValue,
         ..._this.localeData
       })) {
-        visibleValue = "";
+        isoValue = _date.default.formatValue({
+          value: visibleValue,
+          ..._this.localeData
+        });
       }
 
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -506,7 +503,7 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
         inputElement: _this.inputPresentationRef,
         selectedDate: _this.state.selectedDate,
         handleDateSelect: _this.handleDateSelect,
-        inputDate: visibleValue,
+        inputDate: isoValue,
         disablePortal: _this.props.disablePortal
       }, dateRangeProps)));
     });
@@ -642,7 +639,7 @@ function generateAdjustedValue({
   formats,
   format
 }) {
-  if (value !== undefined && canReturnValue(value, allowEmptyValue, locale, formats, format)) {
+  if (value !== undefined && canReturnValue(value, allowEmptyValue)) {
     return _date.default.formatDateToCurrentLocale({
       value,
       locale,
@@ -651,7 +648,7 @@ function generateAdjustedValue({
     });
   }
 
-  if (canReturnValue(defaultValue, allowEmptyValue, locale, formats, format)) {
+  if (canReturnValue(defaultValue, allowEmptyValue)) {
     return _date.default.formatDateToCurrentLocale({
       value: defaultValue,
       locale,
@@ -668,25 +665,20 @@ function generateAdjustedValue({
   });
 }
 
-function isValidInitialFormat(value, locale, formats, format) {
+function isValidInitialFormat(value) {
   return _date.default.isValidDate({
     value,
-    options: {
-      defaultValue: hiddenDateFormat
-    },
-    locale,
-    formats,
-    format
+    format: hiddenDateFormat
   });
 }
 
-function canReturnValue(value, allowEmptyValue, locale, formats, format) {
+function canReturnValue(value, allowEmptyValue) {
   if (!allowEmptyValue && value && value.length) {
     const message = "The Date component must be initialised with a value in the iso (YYYY-MM-DD) format";
-    (0, _invariant.default)(isValidInitialFormat(value, locale, formats, format), message);
+    (0, _invariant.default)(isValidInitialFormat(value), message);
   }
 
-  return isValidInitialFormat(value, locale, formats, format) || allowEmptyValue && !value;
+  return isValidInitialFormat(value) || allowEmptyValue && !value;
 }
 
 const DateInput = (0, _withUniqueIdProps.default)(BaseDateInput);

package/lib/components/help/help.component.js

@@ -139,7 +139,7 @@ Help.propTypes = { ...marginPropTypes,
   /** A path for the anchor */
   href: _propTypes.default.string,
 
-  /** A boolean received from IconWrapper */
+  /** Overrides the visibility of the Tooltip if true */
   isFocused: _propTypes.default.bool,
 
   /** <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>

package/lib/components/help/help.d.ts

@@ -13,7 +13,7 @@ export interface HelpProps extends MarginProps {
   helpId?: string;
   /** A path for the anchor */
   href?: string;
-  /** A boolean received from IconWrapper */
+  /** Overrides the visibility of the Tooltip if true */
   isFocused?: boolean;
   /** Overrides the default tabindex of the component */
   tabIndex?: number | string;

package/lib/components/portal/portal.js

@@ -15,6 +15,8 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 
 var _browser = _interopRequireDefault(require("../../__internal__/utils/helpers/browser"));
 
+var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+
 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; }
@@ -63,7 +65,7 @@ const Portal = ({
       setPortalNode(node);
     } else if (!node) {
       node = document.createElement("div");
-      node.classList.add(portalClassName);
+      node.classList.add(portalClassName, _carbonScopedTokensProvider.tokensClassName);
       node.setAttribute("data-portal-exit", uniqueId);
 
       if (id !== undefined) {

package/lib/components/tile-select/tile-select.component.js

@@ -140,7 +140,9 @@ const TileSelect = ({
   }, titleAdornment)), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, checkPropTypeIsNode(description), description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer), accordionContent && accordionControl && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAccordionFooterWrapper, {
     accordionExpanded: accordionExpanded
   }, accordionControl(controlId, contentId))), prefixAdornment && /*#__PURE__*/_react.default.createElement(_box.default, {
-    mr: 3
+    "data-element": "prefix-adornment",
+    mr: 3,
+    opacity: disabled ? "0.3" : undefined
   }, prefixAdornment))), accordionContent && /*#__PURE__*/_react.default.createElement(_accordion.default, {
     contentId: contentId,
     controlId: controlId,

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

@@ -3,28 +3,56 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.GlobalTokens = exports.tokensClassName = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 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 }; }
 
+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); }
+
 /**
  *
  * Converts theme properties to css variables form and set them locally for
  * given scope
  *
  */
-const CarbonScopedTokensProvider = _styledComponents.default.div`
+const tokensClassName = `sageDesignTokens-${(0, _guid.default)()}`;
+exports.tokensClassName = tokensClassName;
+const GlobalTokens = (0, _styledComponents.createGlobalStyle)`
+  .${tokensClassName} {
+    ${({
+  theme
+}) => (0, _generateCssVariables.default)(theme.compatibility)}
+  }
+`;
+exports.GlobalTokens = GlobalTokens;
+const TokensProviderWrapper = _styledComponents.default.div`
   margin: 0;
   padding: 0;
   width: auto;
   display: inline;
-  ${({
-  theme
-}) => (0, _generateCssVariables.default)(theme.compatibility)}
 `;
+
+const CarbonScopedTokensProvider = ({
+  children,
+  theme,
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(TokensProviderWrapper, _extends({}, props, {
+  className: tokensClassName
+}), /*#__PURE__*/_react.default.createElement(GlobalTokens, {
+  theme: theme
+}), children);
+
 var _default = CarbonScopedTokensProvider;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "101.4.0",
+  "version": "101.4.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -62,18 +62,18 @@
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/exec": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^6.3.6",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-controls": "^6.3.7",
-    "@storybook/addon-docs": "^6.3.6",
+    "@storybook/addon-a11y": "^6.3.12",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-controls": "^6.3.12",
+    "@storybook/addon-docs": "^6.3.12",
     "@storybook/addon-google-analytics": "^6.2.9",
-    "@storybook/addon-links": "^6.3.6",
-    "@storybook/addon-toolbars": "^6.3.8",
-    "@storybook/addon-viewport": "^6.3.6",
-    "@storybook/addons": "^6.3.6",
-    "@storybook/components": "^6.3.6",
-    "@storybook/react": "^6.3.6",
-    "@storybook/theming": "^6.3.6",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addon-toolbars": "^6.3.12",
+    "@storybook/addon-viewport": "^6.3.12",
+    "@storybook/addons": "^6.3.12",
+    "@storybook/components": "^6.3.12",
+    "@storybook/react": "^6.3.12",
+    "@storybook/theming": "^6.3.12",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^26.0.19",