carbon-react 104.19.1 → 104.21.1

package/lib/__internal__/input/input-presentation.style.js

@@ -54,9 +54,8 @@ const InputPresentationStyle = _styledComponents.default.div`
     `}
 
   ${({
-  hasFocus,
-  disabled
-}) => hasFocus && !disabled && (0, _styledComponents.css)`
+  hasFocus
+}) => hasFocus && (0, _styledComponents.css)`
       & {
         outline: 3px solid var(--colorsSemanticFocus500);
         z-index: 2;

package/lib/__internal__/input/input.component.js

@@ -53,6 +53,9 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     if (context.inputRef) context.inputRef(input);
   }, [context, input]);
+  (0, _react.useEffect)(() => {
+    if (disabled && context.onBlur) context.onBlur();
+  }, [disabled, context]);
 
   const handleClick = ev => {
     if (onClick) onClick(ev);

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__/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/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/components/pager/pager.style.d.ts

@@ -3,9 +3,8 @@ export const StyledPagerSizeOptions: import("styled-components").StyledComponent
 export const StyledPagerSizeOptionsInner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPagerNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledPagerNavInner: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledPagerLinkStyles: import("styled-components").StyledComponent<"button", any, {
-    type: "button";
-}, "type">;
+export const StyledPagerLinkStyles: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
 export const StyledPagerNoSelect: import("styled-components").StyledComponent<"span", any, {}, never>;
 export const StyledPagerSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+import Link from "../link";

package/lib/components/pager/pager.style.js

@@ -13,10 +13,10 @@ var _inputPresentation = _interopRequireDefault(require("../../__internal__/inpu
 
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle/input-icon-toggle.style"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _selectText = _interopRequireDefault(require("../select/__internal__/select-text/select-text.style"));
 
+var _link = _interopRequireDefault(require("../link"));
+
 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; }
@@ -39,62 +39,15 @@ const StyledPagerContainer = _styledComponents.default.div`
   border-top-width: 0;
   font-size: 13px;
   border-top: none;
+  color: var(--colorsUtilityYin090);
 
   ${({
-  theme,
   variant
-}) => theme.table && theme.colors && (0, _styledComponents.css)`
+}) => (0, _styledComponents.css)`
       border-width: 1px 1px 1px 1px;
       border-style: none solid solid solid;
-      border-color: ${theme.table.secondary};
-      background-color: ${variant === "alternate" ? theme.pager.alternate : theme.table.zebra};
-
-      .carbon-input-icon {
-        border: none;
-        background: none;
-
-        &:hover {
-          background: none;
-          color: ${theme.colors.black};
-        }
-      }
-
-      .common-input__field:focus-within {
-        outline: 3px solid ${theme.colors.focus};
-      }
-
-      .common-input__input {
-        border: 1px solid ${theme.colors.border};
-
-        &:active,
-        &:hover,
-        &:focus {
-          border: 1px solid ${theme.colors.border};
-        }
-
-        &:focus {
-          border: 1px solid ${theme.colors.border};
-          color: ${theme.colors.black};
-        }
-
-        &:focus ~ label .carbon-input-icon,
-        &:focus ~ label .carbon-input-icon:hover {
-          border: none;
-          background: none;
-          color: ${theme.colors.black};
-        }
-
-        &:hover ~ label .carbon-input-icon {
-          border: none;
-          background: none;
-          color: ${theme.colors.black};
-        }
-
-        &:hover ~ label .carbon-input-icon:hover {
-          border: none;
-          background: none;
-        }
-      }
+      border-color: var(--colorsUtilityMajor100);
+      background-color: ${variant === "alternate" ? "var(--colorsUtilityMajor040)" : "var(--colorsUtilityMajor010)"};
     `}
 `;
 exports.StyledPagerContainer = StyledPagerContainer;
@@ -158,44 +111,10 @@ const StyledPagerNavInner = _styledComponents.default.div`
   padding: 0 12px;
 `;
 exports.StyledPagerNavInner = StyledPagerNavInner;
-const StyledPagerLinkStyles = _styledComponents.default.button.attrs({
-  type: "button"
-})`
+const StyledPagerLinkStyles = (0, _styledComponents.default)(_link.default)`
   padding: 0 10px;
-  font-size: 13px;
-  border-width: 0;
-  background-color: transparent;
-  cursor: pointer;
   margin-left: 7px;
   margin-right: 7px;
-
-  ${({
-  theme
-}) => theme.pager && (0, _styledComponents.css)`
-      color: ${theme.pager.active};
-
-      ${({
-  disabled
-}) => !disabled && (0, _styledComponents.css)`
-          &:hover {
-            text-decoration: underline;
-            padding: 5px 10px;
-          }
-        `}
-
-      &:focus {
-        outline: solid 3px ${theme.colors.focus};
-        padding: 5px 10px;
-      }
-    `}
-
-  ${({
-  disabled,
-  theme
-}) => disabled && theme && (0, _styledComponents.css)`
-      color: ${theme.pager.disabled};
-      cursor: not-allowed;
-    `}
 `;
 exports.StyledPagerLinkStyles = StyledPagerLinkStyles;
 const StyledPagerNoSelect = _styledComponents.default.span`
@@ -208,25 +127,4 @@ const StyledPagerSummary = _styledComponents.default.div`
   flex: 1 1 30%;
   justify-content: flex-end;
 `;
-exports.StyledPagerSummary = StyledPagerSummary;
-StyledPagerContainer.defaultProps = {
-  theme: _base.default
-};
-StyledPagerSizeOptions.defaultProps = {
-  theme: _base.default
-};
-StyledPagerSizeOptionsInner.defaultProps = {
-  theme: _base.default
-};
-StyledPagerNavigation.defaultProps = {
-  theme: _base.default
-};
-StyledPagerNavInner.defaultProps = {
-  theme: _base.default
-};
-StyledPagerLinkStyles.defaultProps = {
-  theme: _base.default
-};
-StyledPagerSummary.defaultProps = {
-  theme: _base.default
-};
+exports.StyledPagerSummary = StyledPagerSummary;

package/package.json

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