carbon-react 104.18.1 → 104.19.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/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/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.19.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {