carbon-react 104.19.2 → 104.22.0

package/lib/__internal__/full-screen-heading/full-screen-heading.style.js

@@ -9,10 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _heading = require("../../components/heading/heading.style");
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
-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; }
@@ -26,9 +22,7 @@ const StyledFullScreenHeading = _styledComponents.default.div`
   ${({
   hasContent
 }) => hasContent && (0, _styledComponents.css)`
-      border-bottom: 1px solid ${({
-  theme
-}) => theme.disabled.border};
+      border-bottom: 1px solid var(--colorsUtilityMajor050);
     `}
   display: flex;
   justify-content: space-between;
@@ -56,8 +50,5 @@ const StyledFullScreenHeading = _styledComponents.default.div`
     }
   }
 `;
-StyledFullScreenHeading.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledFullScreenHeading;
 exports.default = _default;

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/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/heading/heading.style.js

@@ -78,9 +78,7 @@ const StyledHeadingBackButton = (0, _styledComponents.default)(_link.default)`
 
     &:focus {
       background-color: transparent;
-      outline: 3px solid ${({
-  theme
-}) => theme.colors.focus};
+      outline: 3px solid var(--colorsSemanticFocus500);
     }
 
     ${_icon2.default} {
@@ -90,9 +88,6 @@ const StyledHeadingBackButton = (0, _styledComponents.default)(_link.default)`
   }
 `;
 exports.StyledHeadingBackButton = StyledHeadingBackButton;
-StyledHeadingBackButton.defaultProps = {
-  theme: _base.default
-};
 const StyledHeadingTitle = (0, _styledComponents.default)(_typography.default)`
   line-height: 32px;
   ${({
@@ -127,9 +122,7 @@ const StyledSubHeader = _styledComponents.default.div`
 `;
 exports.StyledSubHeader = StyledSubHeader;
 const StyledHeadingIcon = (0, _styledComponents.default)(_icon.default)`
-  color: ${({
-  theme
-}) => theme.colors.border};
+  color: var(--colorsActionMinor500);
   height: 30px;
 
   &:before,
@@ -138,19 +131,12 @@ const StyledHeadingIcon = (0, _styledComponents.default)(_icon.default)`
   }
 
   &:hover {
-    color: ${({
-  theme
-}) => theme.icon.focus};
+    color: var(--colorsActionMinor600);
   }
 `;
 exports.StyledHeadingIcon = StyledHeadingIcon;
-StyledHeadingIcon.defaultProps = {
-  theme: _base.default
-};
 const StyledSeparator = _styledComponents.default.hr`
-  border-top: 2px solid ${({
-  theme
-}) => theme.palette.slateTint(80)};
+  border-top: 2px solid var(--colorsUtilityMajor100);
   margin: 10px 0 8px;
   text-align: left;
   width: 50px;
@@ -160,9 +146,6 @@ const StyledDivider = (0, _styledComponents.default)(_hr.default)`
   margin: 15px 0 20px;
 `;
 exports.StyledDivider = StyledDivider;
-StyledSeparator.defaultProps = {
-  theme: _base.default
-};
 const StyledHeaderHelp = (0, _styledComponents.default)(_help.default)`
   display: inline-block;
   margin-left: -6px;

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.2",
+  "version": "104.22.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {