carbon-react 104.4.0 → 104.7.1

package/lib/components/button/button-types.style.js

@@ -30,7 +30,7 @@ var _default = (isDisabled, destructive) => ({
 
     ${isDisabled ? `
     background: var(--colorsActionDisabled500);
-    ${makeColors("var(--colorsYin030)")};
+    ${makeColors("var(--colorsActionMajorYin030)")};
     &:hover {
       background: var(--colorsActionDisabled500);
     }
@@ -44,7 +44,7 @@ var _default = (isDisabled, destructive) => ({
 
     ${isDisabled ? `
       background: var(--colorsActionDisabled500);
-      ${makeColors("var(--colorsYin030)")};
+      ${makeColors("var(--colorsActionMajorYin030)")};
       &:hover {
         background: var(--colorsActionDisabled500);
       }
@@ -72,11 +72,11 @@ var _default = (isDisabled, destructive) => ({
 
       ${isDisabled ? `
         border-color: var(--colorsActionDisabled500);
-        ${makeColors("var(--colorsYin030)")};
+        ${makeColors("var(--colorsActionMajorYin030)")};
         &:hover {
           background: transparent;
           border-color: var(--colorsActionDisabled500);
-          ${makeColors("var(--colorsYin030)")};
+          ${makeColors("var(--colorsActionMajorYin030)")};
         }
     ` : ""}
   `,
@@ -98,10 +98,10 @@ var _default = (isDisabled, destructive) => ({
       ` : ""}
 
     ${isDisabled ? `
-      ${makeColors("var(--colorsYin030)")};
+      ${makeColors("var(--colorsActionMajorYin030)")};
       &:hover {
         background: var(--colorsActionMajorTransparent);
-        ${makeColors("var(--colorsYin030)")};
+        ${makeColors("var(--colorsActionMajorYin030)")};
       }
     ` : ""}
   `,
@@ -119,7 +119,7 @@ var _default = (isDisabled, destructive) => ({
 
     ${isDisabled ? `
       border-color: var(--colorsActionDisabled500);
-      ${makeColors("var(--colorsYin030)")};
+      ${makeColors("var(--colorsActionMinorYin030)")};
       &:hover {
         background-color: transparent;
       }
@@ -136,10 +136,10 @@ var _default = (isDisabled, destructive) => ({
 
     ${isDisabled ? `
       background: var(--colorsActionDisabled500);
-      ${makeColors("var(--colorsYin030)")};
+      ${makeColors("var(--colorsActionMajorYin030)")};
       &:hover {
         background: var(--colorsActionDisabled500);
-        ${makeColors("var(--colorsYin030)")};
+        ${makeColors("var(--colorsActionMajorYin030)")};
       }
     ` : ""}
   `

package/lib/components/dialog/dialog.style.js

@@ -7,8 +7,6 @@ exports.DialogInnerContentStyle = exports.DialogContentStyle = exports.DialogTit
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _form = require("../form/form.style");
 
 var _heading = require("../heading/heading.style");
@@ -34,10 +32,8 @@ const dialogSizes = {
 const HORIZONTAL_PADDING = 35;
 const CONTENT_BOTTOM_PADDING = 30;
 const DialogStyle = _styledComponents.default.div`
-  background-color: #f2f5f6;
-  box-shadow: ${({
-  theme
-}) => theme.shadows.depth3};
+  background-color: var(--colorsUtilityMajor025);
+  box-shadow: var(--boxShadow300);
   display: flex;
   flex-direction: column;
   position: fixed;
@@ -119,9 +115,7 @@ const DialogTitleStyle = _styledComponents.default.div`
     margin-bottom: 20px;
 
     ${_heading.StyledHeadingTitle} {
-      color: ${({
-  theme
-}) => theme.text.color};
+      color: var(--colorsUtilityYin090);
       display: block;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -147,10 +141,4 @@ const DialogInnerContentStyle = _styledComponents.default.div`
   position: relative;
   flex: 1;
 `;
-exports.DialogInnerContentStyle = DialogInnerContentStyle;
-DialogTitleStyle.defaultProps = {
-  theme: _base.default
-};
-DialogStyle.defaultProps = {
-  theme: _base.default
-};
+exports.DialogInnerContentStyle = DialogInnerContentStyle;

package/lib/components/dialog-full-screen/dialog-full-screen.style.js

@@ -26,9 +26,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 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 StyledDialogFullScreen = _styledComponents.default.div`
-  background-color: ${({
-  theme
-}) => theme.disabled.input};
+  background-color: var(--colorsUtilityMajor025);
   height: 100%;
   left: 0;
   position: fixed;
@@ -36,7 +34,7 @@ const StyledDialogFullScreen = _styledComponents.default.div`
   width: 100%;
   z-index: ${({
   theme
-}) => theme.zIndex.fullScreenModal};
+}) => theme.zIndex.fullScreenModal}; // TODO (tokens): implement elevation tokens - FE-4437
   display: flex;
   flex-direction: column;
 

package/lib/components/draggable/draggable-container.component.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDnd = require("react-dnd");
 
-var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -96,7 +96,7 @@ const DraggableContainer = ({
 
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
-    backend: _reactDndHtml5Backend.default
+    backend: _reactDndHtml5Backend.HTML5Backend
   }, /*#__PURE__*/_react.default.createElement(DropTarget, _extends({
     getOrder: getItemsId
   }, marginProps), draggableItems.map(item => /*#__PURE__*/_react.default.cloneElement(item, {

package/lib/components/draggable/draggable-item.component.js

@@ -35,8 +35,8 @@ const DraggableItem = ({
   const [{
     isDragging
   }, drag] = (0, _reactDnd.useDrag)({
+    type: "draggableItem",
     item: {
-      type: "draggableItem",
       id,
       originalIndex
     },

package/lib/components/draggable/draggable-test.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _draggableContainer = _interopRequireDefault(require("./draggable-container.component"));
+
+var _draggableItem = _interopRequireDefault(require("./draggable-item.component"));
+
+var _checkbox = require("../checkbox");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: "Draggable/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  }
+};
+exports.default = _default;
+
+const Default = () => {
+  const handleUpdate = items => {
+    (0, _addonActions.action)("onUpdate")(items);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_draggableContainer.default, {
+    getOrder: handleUpdate
+  }, /*#__PURE__*/_react.default.createElement(_draggableItem.default, {
+    key: "1",
+    id: 1
+  }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+    label: "Draggable Label One"
+  })), /*#__PURE__*/_react.default.createElement(_draggableItem.default, {
+    key: "2",
+    id: 2
+  }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+    label: "Draggable Label Two"
+  })), /*#__PURE__*/_react.default.createElement(_draggableItem.default, {
+    key: "3",
+    id: 3
+  }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+    label: "Draggable Label Three"
+  })), /*#__PURE__*/_react.default.createElement(_draggableItem.default, {
+    key: "4",
+    id: 4
+  }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+    label: "Draggable Label Four"
+  })));
+};
+
+exports.Default = Default;
+Default.story = {
+  name: "default"
+};

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDnd = require("react-dnd");
 
-var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -45,6 +45,11 @@ const DropTarget = ({
   }, rest), children);
 };
 
+DropTarget.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  getOrder: _propTypes.default.func
+};
+
 const FlatTableBodyDraggable = ({
   children,
   getOrder
@@ -88,15 +93,14 @@ const FlatTableBodyDraggable = ({
   };
 
   return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
-    backend: _reactDndHtml5Backend.default
+    backend: _reactDndHtml5Backend.HTML5Backend
   }, /*#__PURE__*/_react.default.createElement(DropTarget, {
     getOrder: getItemsId
   }, draggableItems.map(item => /*#__PURE__*/_react.default.cloneElement(item, {
     id: `${item.props.id}`,
     moveItem,
     findItem,
-    draggable: true,
-    key: `${item.props.id}`
+    draggable: true
   }, [/*#__PURE__*/_react.default.createElement(_flatTableCell.default, {
     key: item.props.id
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -108,9 +112,5 @@ FlatTableBodyDraggable.propTypes = {
   getOrder: _propTypes.default.func,
   children: _propTypes.default.node.isRequired
 };
-DropTarget.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  getOrder: _propTypes.default.func
-};
 var _default = FlatTableBodyDraggable;
 exports.default = _default;

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.d.ts

@@ -5,6 +5,7 @@ declare function FlatTableRowDraggable({ children, id, findItem, moveItem }: {
     findItem: any;
     moveItem: any;
 }): React.DetailedReactHTMLElement<{
+    key: any;
     id: any;
     isDragging: boolean;
     ref: (node: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.js

@@ -23,8 +23,8 @@ const FlatTableRowDraggable = ({
   const [{
     isDragging
   }, drag] = (0, _reactDnd.useDrag)({
+    type: "flatTableRow",
     item: {
-      type: "flatTableRow",
       id,
       originalIndex
     },
@@ -60,6 +60,7 @@ const FlatTableRowDraggable = ({
 
   });
   return /*#__PURE__*/_react.default.cloneElement(children, {
+    key: originalIndex,
     id,
     isDragging,
     ref: node => drag(drop(node))

package/lib/components/loader/loader-square.style.js

@@ -67,7 +67,7 @@ const StyledLoaderSquare = _styledComponents.default.div`
     ${getDimentions(size)}
 
     ${isInsideButton && (0, _styledComponents.css)`
-      background-color: ${isActive ? "var(--colorsYang100)" : "var(--colorsSemanticNeutral500)"};
+      background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};
     `}
 
     &:nth-of-type(1) {

package/lib/components/navigation-bar/navigation-bar.style.js

@@ -62,6 +62,7 @@ const StyledNavigationBar = _styledComponents.default.nav`
   theme
 }) => (0, _styledComponents.css)`
     min-height: 40px;
+    z-index: ${theme.zIndex.nav};
 
     ${navigationType === "light" && (0, _styledComponents.css)`
       background-color: ${theme.navigationBar.light.background};

package/lib/components/sidebar/sidebar.style.js

@@ -26,7 +26,7 @@ const SidebarStyle = _styledComponents.default.div`
   size,
   theme
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.disabled.input};
+    background: var(--colorsUtilityMajor025);
     border-radius: 1px;
     bottom: 0;
     position: fixed;
@@ -40,7 +40,7 @@ const SidebarStyle = _styledComponents.default.div`
     `}
 
     ${position && (0, _styledComponents.css)`
-      box-shadow: ${theme.shadows.depth3};
+      box-shadow: var(--boxShadow300);
       ${position}: 0;
     `}
 

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

@@ -13,8 +13,6 @@ var _fieldset = _interopRequireDefault(require("../fieldset"));
 
 var _input = require("../../__internal__/input");
 
-var _tint = _interopRequireDefault(require("../../style/utils/tint"));
-
 var _fieldset2 = require("../fieldset/fieldset.style");
 
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
@@ -33,6 +31,7 @@ const StyledTitle = _styledComponents.default.h3`
   margin: 0;
   margin-right: 16px;
   margin-bottom: 8px;
+  color: var(--colorsActionMinorYin090);
 `;
 exports.StyledTitle = StyledTitle;
 const StyledSubtitle = _styledComponents.default.h4`
@@ -41,6 +40,7 @@ const StyledSubtitle = _styledComponents.default.h4`
   margin: 0;
   margin-right: 16px;
   margin-bottom: 8px;
+  color: var(--colorsActionMinorYin090);
 `;
 exports.StyledSubtitle = StyledSubtitle;
 const StyledAdornment = _styledComponents.default.div`
@@ -51,36 +51,28 @@ const StyledAdornment = _styledComponents.default.div`
 `;
 exports.StyledAdornment = StyledAdornment;
 const StyledDescription = _styledComponents.default.p`
-  color: ${({
-  theme
-}) => theme.tileSelect.descriptionColor};
+  color: var(--colorsActionMinorYin055);
   font-size: 14px;
   margin: 0;
 `;
 exports.StyledDescription = StyledDescription;
 const StyledTileSelect = _styledComponents.default.div`
-  background-color: ${({
-  theme
-}) => theme.colors.white};
+  background: var(--colorsActionMinorYang100);
   padding: 24px;
   ${({
-  checked,
-  theme
+  checked
 }) => checked && (0, _styledComponents.css)`
-      background: ${(0, _tint.default)(theme.colors.primary)(95)};
+      background: var(--colorsActionMajor025);
     `}
 
   ${({
-  disabled,
-  theme
+  disabled
 }) => disabled && (0, _styledComponents.css)`
-      background: ${theme.tileSelect.disabledBackground};
+      background: var(--colorsActionMinorYang100);
       ${StyledTitle}, ${StyledSubtitle}, ${StyledDescription} {
-        color: ${theme.tileSelect.disabledText};
+        color: var(--colorsActionMinorYin030);
       }
       ${StyledAdornment} * {
-        color: ${theme.colors.black};
-        fill: ${theme.colors.black};
         opacity: 0.3;
       }
     `}
@@ -89,18 +81,17 @@ exports.StyledTileSelect = StyledTileSelect;
 const StyledFocusWrapper = _styledComponents.default.div`
   ${({
   checked,
-  theme,
   hasFocus
 }) => (0, _styledComponents.css)`
     position: relative;
-    border: 1px solid ${theme.tileSelect.border};
+    border: 1px solid var(--colorsActionMinor250);
     ${checked && (0, _styledComponents.css)`
-      border-color: ${theme.colors.primary};
+      border-color: var(--colorsActionMajor500);
       z-index: 10;
     `}
 
     ${hasFocus && (0, _styledComponents.css)`
-      outline: 3px solid ${theme.colors.focus};
+      outline: 3px solid var(--colorsSemanticFocus500);
       z-index: 15;
     `}
   `}
@@ -116,11 +107,10 @@ const StyledTileSelectContainer = _styledComponents.default.div`
   }
   ${({
   checked,
-  disabled,
-  theme
+  disabled
 }) => !checked && !disabled && (0, _styledComponents.css)`
       &:hover ${StyledTileSelect} {
-        background: ${theme.tileSelect.hoverBackground};
+        background: var(--colorsActionMinor050);
       }
     `}
 `;
@@ -171,8 +161,7 @@ const StyledTitleContainer = _styledComponents.default.div`
 exports.StyledTitleContainer = StyledTitleContainer;
 const StyledDeselectWrapper = _styledComponents.default.div`
   ${({
-  hasActionAdornment,
-  theme
+  hasActionAdornment
 }) => (0, _styledComponents.css)`
     z-index: 200;
     position: relative;
@@ -181,10 +170,10 @@ const StyledDeselectWrapper = _styledComponents.default.div`
     height: fit-content;
 
     ${hasActionAdornment && `
-      margin-right: ${2 * theme.spacing}px;
+      margin-right: var(--sizing200);
       display: flex;
       align-items: baseline;
-      min-height: ${4 * theme.spacing}px;
+      min-height: var(--sizing400);
 
       ${_icon.default} {
         top: 2px;
@@ -214,9 +203,7 @@ const StyledTileSelectFieldset = (0, _styledComponents.default)(_fieldset.defaul
 `;
 exports.StyledTileSelectFieldset = StyledTileSelectFieldset;
 const StyledGroupDescription = _styledComponents.default.p`
-  color: ${({
-  theme
-}) => theme.tileSelect.descriptionColor};
+  color: var(--colorsActionMinorYin055);
   margin: 0;
   margin-bottom: 16px;
 `;
@@ -224,24 +211,6 @@ exports.StyledGroupDescription = StyledGroupDescription;
 StyledTileSelectFieldset.defaultProps = {
   theme: _themes.baseTheme
 };
-StyledTileSelect.defaultProps = {
-  theme: _themes.baseTheme
-};
 StyledTileSelectContainer.defaultProps = {
   theme: _themes.baseTheme
-};
-StyledGroupDescription.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledTileSelectInput.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledDescription.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledDeselectWrapper.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledFocusWrapper.defaultProps = {
-  theme: _themes.baseTheme
 };

package/lib/style/themes/base/base-theme.config.d.ts

@@ -349,6 +349,7 @@ declare function _default(palette: any): {
         smallOverlay: number;
         overlay: number;
         popover: number;
+        nav: number;
         modal: number;
         header: number;
         fullScreenModal: number;

package/lib/style/themes/base/base-theme.config.js

@@ -370,6 +370,7 @@ var _default = palette => {
       smallOverlay: 10,
       overlay: 1000,
       popover: 2000,
+      nav: 2999,
       modal: 3000,
       header: 4000,
       fullScreenModal: 5000,

package/lib/style/themes/base/index.d.ts

@@ -365,6 +365,7 @@ export interface ThemeObject {
     smallOverlay: number;
     overlay: number;
     popover: number;
+    nav: number;
     modal: number;
     header: number;
     fullScreenModal: number;

package/lib/style/themes/sage/index.d.ts

@@ -637,6 +637,7 @@ declare var _default: {
         smallOverlay: number;
         overlay: number;
         popover: number;
+        nav: number;
         modal: number;
         header: number;
         fullScreenModal: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.4.0",
+  "version": "104.7.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -171,8 +171,8 @@
     "polished": "^4.0.5",
     "prop-types": "^15.7.2",
     "react-day-picker": "~7.4.10",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
+    "react-dnd": "^14.0.5",
+    "react-dnd-html5-backend": "^14.1.0",
     "react-is": "^17.0.2",
     "react-transition-group": "^4.4.1",
     "styled-system": "^5.1.5",