carbon-react 104.18.1 → 104.20.0

package/lib/components/batch-selection/batch-selection.style.js

@@ -7,8 +7,6 @@ exports.StyledSelectionCount = exports.StyledBatchSelection = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
@@ -23,7 +21,6 @@ const StyledBatchSelection = _styledComponents.default.div`
   ${({
   disabled,
   colorTheme,
-  theme,
   hidden
 }) => (0, _styledComponents.css)`
     align-items: center;
@@ -31,22 +28,26 @@ const StyledBatchSelection = _styledComponents.default.div`
 
     ${hidden && "opacity: 0;"}
 
+    ${_icon.default} {
+      color: var(--colorsActionMajorYin065);
+    }
+
     ${colorTheme === "dark" && (0, _styledComponents.css)`
-      background-color: ${theme.colors.slate};
-      color: ${theme.colors.white};
+      background-color: var(--colorsUtilityMajor500);
+      color: var(--colorsUtilityYang100);
 
       ${_icon.default} {
-        color: ${theme.colors.white};
+        color: var(--colorsActionMajorYang100);
       }
     `}
 
     ${colorTheme === "light" && (0, _styledComponents.css)`
-      background-color: ${theme.batchSelection.lightTheme};
+      background-color: var(--colorsUtilityMajor150);
     `}
 
     ${colorTheme === "white" && (0, _styledComponents.css)`
-      background-color: ${theme.white};
-      box-shadow: ${theme.shadows.depth1};
+      background-color: var(--colorsUtilityYang100);
+      box-shadow: var(--boxShadow100);
     `}
 
     ${_iconButton.default} {
@@ -56,16 +57,16 @@ const StyledBatchSelection = _styledComponents.default.div`
     }
 
     ${_iconButton.default}:hover {
-      background-color: ${theme.colors.base};
+      background-color: var(--colorsActionMajor500);
 
       ${_icon.default} {
-        color: ${theme.colors.white};
+        color: var(--colorsActionMajorYang100);
       }
     }
 
     ${disabled && (0, _styledComponents.css)`
       background: transparent;
-      color: ${theme.disabled.disabled};
+      color: var(--colorsUtilityYin030);
       cursor: not-allowed;
 
       ${_iconButton.default} {
@@ -73,16 +74,13 @@ const StyledBatchSelection = _styledComponents.default.div`
         pointer-events: none;
 
         ${_icon.default} {
-          color: ${theme.icon.disabled};
+          color: var(--colorsActionMajorYin030);
         }
       }
     `}
   `}
 `;
 exports.StyledBatchSelection = StyledBatchSelection;
-StyledBatchSelection.defaultProps = {
-  theme: _base.default
-};
 const StyledSelectionCount = _styledComponents.default.span`
   display: inline-block;
   padding: 10px 15px;

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

@@ -30,7 +30,7 @@ const ButtonToggleGroupStyle = _styledComponents.default.div`
     ${({
   info
 }) => info && (0, _styledComponents.css)`
-        border-color: var(--colorsActionMinor500);
+        border-color: var(--colorsSemanticInfo500);
       `};
     ${({
   warning

package/lib/components/date/__internal__/date-picker/day-picker.style.js

@@ -200,20 +200,11 @@ const StyledDayPicker = _styledComponents.default.div`
     z-index: 1000;
     top: calc(100% + 1px);
     left: 0;
-    background-color: ${({
-  theme
-}) => theme.colors.white};
-    box-shadow: ${({
-  theme
-}) => theme.shadows.depth1};
-    color: ${({
-  theme
-}) => theme.text.color};
+    background-color: var(--colorsUtilityYang100);
+    box-shadow: var(--boxShadow100);
     display: block;
-    font-size: 14px;
-    font-weight: 800;
     overflow: hidden;
-    padding: 24px;
+    padding: var(--spacing300);
     text-align: center;
     user-select: none;
   }
@@ -234,9 +225,7 @@ const StyledDayPicker = _styledComponents.default.div`
   .DayPicker-wrapper {
     padding: 0;
     &:focus {
-      outline: ${({
-  theme
-}) => `3px solid ${theme.colors.focus}`};
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
   }
 
@@ -250,8 +239,10 @@ const StyledDayPicker = _styledComponents.default.div`
   }
 
   .DayPicker-Caption {
-    line-height: 40px;
-    height: 40px;
+    color: var(--colorsActionMajorYin090);
+    line-height: var(--sizing500);
+    height: var(--sizing500);
+    //font: var(--typographyDatePickerCalendarMonthM); to be implemented
     font-size: 16px;
     font-weight: 800;
 
@@ -262,28 +253,25 @@ const StyledDayPicker = _styledComponents.default.div`
   }
 
   .DayPicker-Day {
-    min-width: 40px;
-    background-color: ${({
-  theme
-}) => theme.colors.white};
+    min-width: var(--sizing500);
+    height: 36px; //var(--sizing450); to be implemented
+    padding: 0;
+    background-color: var(--colorsUtilityYang100);
     cursor: pointer;
     border: none;
-    font-weight: 800;
-    padding: 10px 0;
+    //font-family: var(--fontFamiliesDefault); token value to be updated
+    //font: var(--typographyDatePickerCalendarDateM); to be implemented
+    font-weight: var(--fontWeights700);
+    font-size: var(--fontSizes100);
+    line-height: var(--lineHeights500);
 
     &:hover {
-      background-color: ${({
-  theme
-}) => theme.disabled.input};
-      color: ${({
-  theme
-}) => theme.text.color};
+      background-color: var(--colorsActionMinor050);
+      color: var(--colorsActionMajorYin090);
     }
 
     &:focus {
-      outline: ${({
-  theme
-}) => `3px solid ${theme.colors.focus}`};
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
 
     + * {
@@ -297,52 +285,30 @@ const StyledDayPicker = _styledComponents.default.div`
 
   .DayPicker-Day--today,
   .DayPicker-Day--today.DayPicker-Day--outside {
-    font-weight: 800;
-    color: ${({
-  theme
-}) => theme.text.color};
-    background-color: ${({
-  theme
-}) => theme.disabled.border};
+    color: var(--colorsActionMajorYin090);
+    background-color: var(--colorsActionMinor200);
   }
 
   .DayPicker-Day--outside {
-    color: ${({
-  theme
-}) => theme.disabled.disabled};
-    background-color: ${({
-  theme
-}) => theme.colors.white};
+    color: var(--colorsActionMajorYin055);
+    background-color: var(--colorsUtilityYang100);
   }
 
   .DayPicker-Day--disabled,
   .DayPicker-Day--disabled:hover {
-    color: ${({
-  theme
-}) => theme.disabled.disabled};
-    background-color: ${({
-  theme
-}) => theme.colors.white};
+    color: var(colorsActionMajorYin030);
+    background-color: var(--colorsUtilityYang100);
     cursor: default;
   }
 
   .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
-    background-color: ${({
-  theme
-}) => theme.colors.primary};
-    color: ${({
-  theme
-}) => theme.colors.white};
-    font-weight: 800;
+    background-color: var(--colorsActionMajor500);
+    color: var(--colorsUtilityYang100);
   }
 
   .DayPicker-Day--selected.DayPicker-Day--disabled:not(.DayPicker-Day--outside) {
-    background-color: ${({
-  theme
-}) => theme.colors.primary};
-    color: ${({
-  theme
-}) => theme.colors.white};
+    background-color: var(--colorsActionMajor500);
+    color: var(--colorsUtilityYang100);
   }
 `;
 StyledDayPicker.defaultProps = {

package/lib/components/date/__internal__/navbar/button.style.js

@@ -7,30 +7,25 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledButton = _styledComponents.default.button.attrs({
   type: "button"
 })`
+  justify-content: center;
   align-items: center;
-  display: block;
-  border: none;
+  display: flex;
+  border: var(--borderWidth200) solid var(--colorsActionMinorTransparent);
   background: none;
   box-shadow: none;
   cursor: pointer;
-  height: 40px;
-  width: 40px;
-  padding: 0;
+  height: var(--sizing500);
+  width: var(--sizing500);
+  padding: var(--spacing150);
+  box-sizing: border-box;
   &:focus {
-    outline: ${({
-  theme
-}) => `3px solid ${theme.colors.focus}`};
+    outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
   }
 `;
-StyledButton.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledButton;
 exports.default = _default;

package/lib/components/date/__internal__/navbar/navbar.style.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledNavbar = _styledComponents.default.div`
@@ -17,11 +15,8 @@ const StyledNavbar = _styledComponents.default.div`
     justify-content: space-between;
     padding: 0;
     top: 0;
-    height: 40px;
+    height: var(--sizing500);
   }
 `;
-StyledNavbar.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledNavbar;
 exports.default = _default;

package/lib/components/date/__internal__/utils.js

@@ -39,7 +39,12 @@ function isDateValid(date) {
   return date && date.toString() !== "Invalid Date";
 }
 
-function hasMatchedFormat(formatString, valueString) {
+function hasMatchedFormat(formatString, valueString, fullFormat, fullValue) {
+  if (formatString.includes("d")) {
+    return formatString.length === valueString.length && (0, _fp.isMatch)(fullFormat.join("."), fullValue.join(".")) // need to check day value with month value
+    ;
+  }
+
   return formatString.length === valueString.length && (0, _fp.isMatch)(formatString, valueString);
 }
 
@@ -66,7 +71,7 @@ function makeSeparatedValues(arr, str) {
 }
 
 function checkForCompleteMatch(formatArray, valueArray) {
-  return formatArray.every((formatString, i) => hasMatchedFormat(formatString, valueArray[i]));
+  return formatArray.every((formatString, i) => hasMatchedFormat(formatString, valueArray[i], formatArray, valueArray));
 }
 
 function findMatchWithNoSeparators(valueString, formatString) {

package/lib/components/date/__internal__/weekday/weekday.style.js

@@ -7,27 +7,23 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledWeekday = _styledComponents.default.div`
   &,
   &.DayPicker-Weekday {
     border: none;
-    min-width: 40px;
+    height: var(--sizing500);
+    min-width: var(--sizing500);
     font-weight: 800;
-    color: ${({
-  theme
-}) => theme.colors.border};
+    color: var(--colorsActionMinor400);
     text-transform: uppercase;
     font-size: 12px;
+    //font: var(--typographyDatePickerCalendarDayM) to be implemented
     text-align: center;
     padding: 20px 0 5px;
+    box-sizing: border-box;
   }
 `;
-StyledWeekday.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledWeekday;
 exports.default = _default;

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

@@ -25,6 +25,8 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
+var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
+
 var _dateFormats = _interopRequireDefault(require("../date/__internal__/date-formats"));
 
 var _dateRange2 = _interopRequireDefault(require("./date-range.context"));
@@ -107,16 +109,7 @@ const DateRange = ({
     formattedValue: getEndDate(),
     rawValue: isEmptyValue(endDateProps.allowEmptyValue, getEndDate()) ? "" : (0, _utils.formatToISO)(format, getEndDate())
   });
-
-  function usePrevious(arg) {
-    const ref = (0, _react.useRef)();
-    (0, _react.useEffect)(() => {
-      ref.current = arg;
-    });
-    return ref.current;
-  }
-
-  const previousValue = usePrevious(value);
+  const previousValue = (0, _usePrevious.default)(value);
   (0, _react.useEffect)(() => {
     const updateValues = () => {
       setStartDateValue({

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

@@ -19,6 +19,8 @@ var _utils = require("../../style/utils");
 
 var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
 
+var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
+
 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; }
@@ -99,27 +101,18 @@ const Decimal = ({
     }
 
     return formattedNumber;
-  }, [getSeparator, isNaN, l, locale, precision]); // Return previous value before state is changed. Used to compare prevState and newState.
-
-  function usePrevious(arg) {
-    const ref = (0, _react.useRef)();
-    (0, _react.useEffect)(() => {
-      ref.current = arg;
-    });
-    return ref.current;
-  }
+  }, [getSeparator, isNaN, l, locale, precision]);
   /**
    * Determine if the precision value has changed from the previous ref value for precision
    */
 
-
-  const prevPrecisionValue = usePrevious(precision);
+  const prevPrecisionValue = (0, _usePrevious.default)(precision);
   (0, _react.useEffect)(() => {
     if (prevPrecisionValue && prevPrecisionValue !== precision) {
       // eslint-disable-next-line no-console
       console.error("Decimal `precision` prop has changed value. Changing the Decimal `precision` prop has no effect.");
     }
-  }, [precision]);
+  }, [precision, prevPrecisionValue]);
   const removeDelimiters = (0, _react.useCallback)(valueToFormat => {
     const delimiterMatcher = new RegExp(`[\\${getSeparator("group")} ]*`, "g");
     return valueToFormat.replace(delimiterMatcher, "");
@@ -190,16 +183,17 @@ const Decimal = ({
     if (onBlur) onBlur(event);
   };
 
-  const isComponentControlled = value !== undefined;
-  const prevControlledState = usePrevious(isComponentControlled);
+  const isControlled = value !== undefined;
+  const prevControlledRef = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
     const message = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-    (0, _invariant.default)(prevControlledState !== isComponentControlled, message);
-  }, [isComponentControlled]);
+    (0, _invariant.default)(prevControlledRef.current !== isControlled, message);
+    prevControlledRef.current = isControlled;
+  }, [isControlled]);
   (0, _react.useEffect)(() => {
     const unformattedValue = toStandardDecimal(stateValue);
 
-    if (isComponentControlled) {
+    if (isControlled) {
       const valueProp = getSafeValueProp(value);
 
       if (unformattedValue !== valueProp) {

package/lib/components/drawer/drawer.component.js

@@ -15,6 +15,8 @@ var _invariant = _interopRequireDefault(require("invariant"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
+var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
+
 var _icon = _interopRequireDefault(require("../icon"));
 
 var _drawer = require("./drawer.style");
@@ -88,16 +90,7 @@ const Drawer = ({
       }, timeout);
     }
   }, [getAnimationDuration, isExpanded]);
-
-  function usePrevious(arg) {
-    const ref = (0, _react.useRef)();
-    (0, _react.useEffect)(() => {
-      ref.current = arg;
-    });
-    return ref.current;
-  }
-
-  const previousValue = usePrevious(expanded);
+  const previousValue = (0, _usePrevious.default)(expanded);
   (0, _react.useEffect)(() => {
     const message = "Drawer should not switch from uncontrolled to controlled" + " (or vice versa). Decide between using a controlled or uncontrolled Drawer element" + " for the lifetime of the component";
     (0, _invariant.default)(isControlled.current === (expanded !== undefined), message);

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

@@ -38,7 +38,7 @@ const StyledLink = _styledComponents.default.span`
         left: -999em;
         z-index: ${theme.zIndex.aboveAll};
         box-shadow: inset 0 0 0 2px var(--colorsActionMajor500);
-        border: 2px solid var(--colorsYang100);
+        border: 2px solid var(--colorsUtilityYang100);
       }
 
       a:focus {
@@ -51,7 +51,7 @@ const StyledLink = _styledComponents.default.span`
   button {
       font-size: ${isSkipLink ? "16px" : "14px"};
       text-decoration: underline;
-      color: ${isSkipLink ? "var(--colorsYin090)" : "var(--colorsActionMajor500)"};
+      color: ${isSkipLink ? "var(--colorsUtilityYin090)" : "var(--colorsActionMajor500)"};
       display: inline-block;
       ${_icon.default} {
         display: inline-block;
@@ -68,21 +68,21 @@ const StyledLink = _styledComponents.default.span`
 
       &:hover {
         cursor: pointer;
-        color: ${isSkipLink ? "var(--colorsYin090)" : "var(--colorsActionMajor600)"};
+        color: ${isSkipLink ? "var(--colorsUtilityYin090)" : "var(--colorsActionMajor600)"};
       }
 
       &:focus {
-        color: var(--colorsYin090);
-        background-color: ${isSkipLink ? "var(--colorsYang100)" : "var(--colorsSemanticFocus250)"};
+        color: var(--colorsActionMajorYin090);
+        background-color: ${isSkipLink ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticFocus250)"};
         outline: none;
       }
 
       ${disabled && (0, _styledComponents.css)`
-        color: var(--colorsYin065);
+        color: var(--colorsActionMajorYin030);
         &:hover,
         &:focus {
           cursor: not-allowed;
-          color: var(--colorsYin065);
+          color: var(--colorsActionMajorYin030);
         }
       `}
     }

package/lib/hooks/__internal__/usePrevious/index.d.ts

@@ -0,0 +1 @@
+export default function usePrevious<T>(value: T): T | undefined;

package/lib/hooks/__internal__/usePrevious/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePrevious;
+
+var _react = require("react");
+
+function usePrevious(value) {
+  const ref = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}

package/package.json

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