carbon-react 94.6.0 → 94.7.1

package/lib/components/accordion/accordion.component.js

@@ -19,8 +19,6 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 
 var _accordion = require("./accordion.style");
 
-var _button = _interopRequireDefault(require("../button"));
-
 var _validations = _interopRequireDefault(require("../../__internal__/validations"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -71,7 +69,10 @@ const Accordion = /*#__PURE__*/_react.default.forwardRef(({
     setContentHeight(accordionContent.current.scrollHeight);
   }, [isExpanded, children]);
   const toggleAccordion = (0, _react.useCallback)(ev => {
-    if (!isControlled) setIsExpandedInternal(!isExpanded);
+    if (!isControlled) {
+      setIsExpandedInternal(!isExpanded);
+    }
+
     if (onChange) onChange(ev, !isExpanded);
   }, [isControlled, isExpanded, onChange]);
   const handleKeyDown = (0, _react.useCallback)(ev => {
@@ -88,6 +89,9 @@ const Accordion = /*#__PURE__*/_react.default.forwardRef(({
   const headerId = `AccordionHeader_${guid.current}`;
   const contentId = `AccordionContent_${guid.current}`;
   const showValidationIcon = !!(error || warning || info);
+
+  const getTitle = () => isExpanded ? openTitle || title : title;
+
   return /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContainer, _extends({
     id: accordionId,
     "data-component": "accordion",
@@ -100,39 +104,39 @@ const Accordion = /*#__PURE__*/_react.default.forwardRef(({
     id: headerId,
     "aria-expanded": isExpanded,
     "aria-controls": contentId,
-    onClick: buttonHeading ? undefined : toggleAccordion,
-    onKeyDown: buttonHeading ? undefined : handleKeyDown,
+    onClick: toggleAccordion,
+    onKeyDown: handleKeyDown,
+    tabIndex: 0,
     iconAlign: iconAlign,
     ref: ref,
-    tabIndex: buttonHeading ? "-1" : "0",
     size: size,
     isExpanded: isExpanded,
     buttonHeading: buttonHeading,
-    buttonWidth: buttonWidth
-  }, headerSpacing), buttonHeading && /*#__PURE__*/_react.default.createElement(_button.default, {
-    buttonType: "tertiary",
-    iconType: "chevron_down",
-    iconPosition: "after",
-    onClick: toggleAccordion
-  }, isExpanded ? openTitle || title : title), !buttonHeading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionHeadingsContainer, {
+    buttonWidth: buttonWidth,
+    hasButtonProps: buttonHeading && headerSpacing
+  }, buttonHeading && {
+    role: "button",
+    p: 0
+  }, headerSpacing), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionHeadingsContainer, {
     "data-element": "accordion-headings-container",
-    hasValidationIcon: showValidationIcon
-  }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitle, {
+    hasValidationIcon: showValidationIcon,
+    buttonHeading: buttonHeading
+  }, !buttonHeading && typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitle, {
     "data-element": "accordion-title",
     size: size
-  }, title) : title, showValidationIcon && /*#__PURE__*/_react.default.createElement(_validations.default, {
+  }, title) : getTitle(), !buttonHeading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showValidationIcon && /*#__PURE__*/_react.default.createElement(_validations.default, {
     error: error,
     warning: warning,
     info: info,
     tooltipPosition: "top",
     tabIndex: 0,
     ml: 1
-  }), subTitle && size === "large" && /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionSubTitle, null, subTitle)), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionIcon, {
+  }), subTitle && size === "large" && /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionSubTitle, null, subTitle))), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionIcon, {
     "data-element": "accordion-icon",
     type: iconType,
     isExpanded: isExpanded,
     iconAlign: iconAlign
-  }))), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContentContainer, {
+  })), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContentContainer, {
     isExpanded: isExpanded,
     maxHeight: contentHeight
   }, /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionContent, {

package/lib/components/accordion/accordion.style.js

@@ -22,11 +22,11 @@ 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 StyledAccordionGroup = _styledComponents.default.div`
-  ${_styledSystem.margin};
+  ${_styledSystem.margin}
 `;
 exports.StyledAccordionGroup = StyledAccordionGroup;
 const StyledAccordionContainer = _styledComponents.default.div`
-  ${_styledSystem.space};
+  ${_styledSystem.space}
   display: flex;
   align-items: ${({
   buttonHeading
@@ -48,18 +48,18 @@ const StyledAccordionContainer = _styledComponents.default.div`
   theme
 }) => (0, _styledComponents.css)`
       border: 1px solid ${theme.accordion.border};
-    `};
+    `}
   ${({
   borders
 }) => borders === "default" && (0, _styledComponents.css)`
       border-left: none;
       border-right: none;
-    `};
+    `}
   ${({
   borders
 }) => borders === "none" && (0, _styledComponents.css)`
       border: none;
-    `};
+    `}
 
   & + & {
     margin-top: -1px;
@@ -103,28 +103,29 @@ const StyledAccordionIcon = (0, _styledComponents.default)(_icon.default)`
 `;
 exports.StyledAccordionIcon = StyledAccordionIcon;
 const StyledAccordionHeadingsContainer = _styledComponents.default.div`
-  display: grid;
   ${({
+  buttonHeading,
   hasValidationIcon
-}) => hasValidationIcon && (0, _styledComponents.css)`
-      grid-template-columns: min-content auto;
+}) => !buttonHeading && (0, _styledComponents.css)`
+      display: grid;
+      ${hasValidationIcon && (0, _styledComponents.css)`
+        grid-template-columns: min-content auto;
+
+        ${StyledAccordionSubTitle} {
+          grid-column: span 3;
+        }
+      `}
 
-      ${StyledAccordionSubTitle} {
-        grid-column: span 3;
-      }
-    `}
+      ${!hasValidationIcon && (0, _styledComponents.css)`
+        grid-template-rows: auto auto;
+      `}
 
-  ${({
-  hasValidationIcon
-}) => !hasValidationIcon && (0, _styledComponents.css)`
-      grid-template-rows: auto auto;
+    ${_validationIcon.default} {
+        height: 20px;
+        position: relative;
+        top: 2px;
+      }
     `}
-
-  ${_validationIcon.default} {
-    height: 20px;
-    position: relative;
-    top: 2px;
-  }
 `;
 exports.StyledAccordionHeadingsContainer = StyledAccordionHeadingsContainer;
 const StyledAccordionTitleContainer = _styledComponents.default.div`
@@ -132,13 +133,12 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
   buttonHeading,
   buttonWidth,
   iconAlign,
-  isExpanded,
   size,
-  theme
+  theme,
+  hasButtonProps
 }) => (0, _styledComponents.css)`
     padding: ${size === "small" ? theme.spacing * 2 : theme.spacing * 3}px;
-    ${_styledSystem.space};
-    ${buttonHeading && "padding: 0"}
+    ${_styledSystem.space}
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -152,7 +152,7 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
     z-index: 1;
 
     &:focus {
-      outline: ${buttonHeading ? "none" : `2px solid ${theme.colors.focus}`};
+      outline: ${buttonHeading ? "3px" : "2px"} solid ${theme.colors.focus};
     }
 
     ${!buttonHeading && (0, _styledComponents.css)`
@@ -161,24 +161,40 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
       }
     `}
 
-    button {
-      position: relative;
-      ${buttonWidth && (0, _styledComponents.css)`
-        width: ${buttonWidth}px;
+    ${buttonHeading && (0, _styledComponents.css)`
+      box-sizing: border-box;
+      font-weight: 600;
+      text-decoration: none;
+      font-size: ${theme.text.size};
+      min-height: ${theme.spacing * 5}px;
+
+      color: ${theme.colors.primary};
+
+      ${!hasButtonProps && (0, _styledComponents.css)`
+        ${StyledAccordionHeadingsContainer} {
+          margin-left: ${iconAlign === "right" ? "64px" : "32px"};
+        }
       `}
-    }
 
-    button > span:first-child {
-      position: absolute;
-      margin-left: -16px;
-    }
+      ${StyledAccordionIcon} {
+        color: ${theme.colors.primary};
+        ${!hasButtonProps && (0, _styledComponents.css)`
+          position: relative;
+          ${iconAlign}: 16px;
+        `}
+      }
 
-    button > span[data-component="icon"] {
-      position: absolute;
-      right: 16px;
-      transition: transform 0.3s;
-      ${!isExpanded && "transform: rotate(90deg)"};
-    }
+      &:hover {
+        color: ${theme.colors.secondary};
+        ${StyledAccordionIcon} {
+          color: ${theme.colors.secondary};
+        }
+      }
+
+      ${buttonWidth && (0, _styledComponents.css)`
+        width: ${buttonWidth}px;
+      `}
+    `}
   `}
 `;
 exports.StyledAccordionTitleContainer = StyledAccordionTitleContainer;

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

@@ -95,7 +95,8 @@ const FlatTableBodyDraggable = ({
     id: `${item.props.id}`,
     moveItem,
     findItem,
-    draggable: true
+    draggable: true,
+    key: `${item.props.id}`
   }, [/*#__PURE__*/_react.default.createElement(_flatTableCell.default, {
     key: item.props.id
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -242,7 +242,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
         ${_flatTableCell.StyledFlatTableCell}:first-child > div,
         ${_flatTableRowHeader.StyledFlatTableRowHeader}:first-child > div,
         ${_flatTableCheckbox.default} + ${_flatTableCell.StyledFlatTableCell} > div {
-          ${_icon.default} {
+          ${_icon.default}[type="chevron_down_thick"]:first-of-type {
             transition: transform 0.3s;
             ${!isExpanded && (0, _styledComponents.css)`
               transform: rotate(-90deg);

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

@@ -42,6 +42,9 @@ const PopoverContainer = ({
   renderCloseComponent,
   shouldCoverButton,
   ariaDescribedBy,
+  openButtonAriaLabel,
+  closeButtonAriaLabel = "close",
+  containerAriaLabel,
   ...rest
 }) => {
   const isControlled = open !== undefined;
@@ -49,7 +52,7 @@ const PopoverContainer = ({
   const closeButtonRef = (0, _react.useRef)();
   const openButtonRef = (0, _react.useRef)();
   const guid = (0, _react.useRef)((0, _guid.default)());
-  const popoverContainerId = `PopoverContainer_${guid.current}`;
+  const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
   (0, _react.useEffect)(() => {
     if (isOpen && closeButtonRef.current) closeButtonRef.current.focus();
@@ -75,18 +78,19 @@ const PopoverContainer = ({
     dataElement: "popover-container-open-component",
     onClick: handleOpenButtonClick,
     ref: openButtonRef,
-    ariaLabel: title
+    ariaLabel: openButtonAriaLabel || title
   };
   const renderCloseComponentProps = {
     dataElement: "popover-container-close-component",
     tabIndex: 0,
     onClick: handleCloseButtonClick,
     ref: closeButtonRef,
-    ariaLabel: "close"
+    ariaLabel: closeButtonAriaLabel
   };
   return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
-    "aria-labelledby": popoverContainerId
+    role: "region",
+    "aria-labelledby": isOpen ? popoverContainerId : undefined
   }, renderOpenComponent(renderOpenComponentProps), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: isOpen,
     timeout: {
@@ -102,6 +106,7 @@ const PopoverContainer = ({
     position: position,
     shouldCoverButton: shouldCoverButton,
     "aria-labelledby": popoverContainerId,
+    "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
     p: "16px 24px"
   }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerHeaderStyle, null, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerTitleStyle, {
@@ -148,18 +153,29 @@ PopoverContainer.propTypes = { ...paddingPropTypes,
   children: _propTypes.default.node,
 
   /** The id of the element that describes the dialog */
-  ariaDescribedBy: _propTypes.default.string
+  ariaDescribedBy: _propTypes.default.string,
+
+  /** Open button aria label */
+  openButtonAriaLabel: _propTypes.default.string,
+
+  /** Close button aria label */
+  closeButtonAriaLabel: _propTypes.default.string,
+
+  /** Container aria label */
+  containerAriaLabel: _propTypes.default.string
 };
 PopoverContainer.defaultProps = {
   position: "right",
   shouldCoverButton: false,
   renderOpenComponent: ({
-    // eslint-disable-next-line react/prop-types
+    /* eslint-disable react/prop-types */
     tabIndex,
     onClick,
     dataElement,
     ref,
     ariaLabel
+    /* eslint-enable react/prop-types */
+
   }) => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerOpenIcon, {
     tabIndex: tabIndex,
     onAction: onClick,
@@ -171,12 +187,14 @@ PopoverContainer.defaultProps = {
     type: "settings"
   })),
   renderCloseComponent: ({
-    // eslint-disable-next-line react/prop-types
+    /* eslint-disable react/prop-types */
     dataElement,
     tabIndex,
     onClick,
     ref,
     ariaLabel
+    /* eslint-enable react/prop-types */
+
   }) => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerCloseIcon, {
     "data-element": dataElement,
     tabIndex: tabIndex,

package/lib/components/popover-container/popover-container.d.ts

@@ -22,6 +22,12 @@ export interface PopoverContainerProps extends PaddingProps {
   shouldCoverButton?: boolean;
   /** The id of the element that describe the dialog. */
   ariaDescribedBy?: string;
+  /** Open button aria label */
+  openButtonAriaLabel?: string;
+  /** Close button aria label */
+  closeButtonAriaLabel?: string;
+  /** Container aria label */
+  containerAriaLabel?: string;
 }
 
 declare function PopoverContainer(props: PopoverContainerProps): JSX.Element;

package/lib/components/popover-container/popover-container.style.js

@@ -27,7 +27,7 @@ const PopoverContainerIcon = (0, _styledComponents.default)(_iconButton.default)
     color: ${({
   theme
 }) => theme.popoverContainer.iconColor};
-  } ;
+  }
 `;
 exports.PopoverContainerIcon = PopoverContainerIcon;
 const PopoverContainerHeaderStyle = _styledComponents.default.div`
@@ -107,7 +107,7 @@ const PopoverContainerCloseIcon = (0, _styledComponents.default)(_iconButton.def
     color: ${({
   theme
 }) => theme.popoverContainer.iconColor};
-  } ;
+  }
 `;
 exports.PopoverContainerCloseIcon = PopoverContainerCloseIcon;
 const PopoverContainerTitleStyle = _styledComponents.default.div`

package/lib/style/design-tokens/theme-compatibility.util.js

@@ -23,6 +23,10 @@ var _default = theme => ({ ...theme,
   metaName: "Base Theme",
   metaPublic: "true",
   colorsLogo: "#00D639",
+  colorsYin030: "rgba(0,0,0,0.3)",
+  colorsYin055: "rgba(0,0,0,0.55)",
+  colorsYin065: "rgba(0,0,0,0.65)",
+  colorsYin090: "rgba(0,0,0,0.9)",
   colorsComponentsNavigation500: "#008146",
   colorsComponentsNavigation600: "#006738",
   colorsComponentsNavigation700: "#004D2A",
@@ -126,31 +130,31 @@ var _default = theme => ({ ...theme,
   sizing050: "4px",
   sizing075: "6px",
   sizingLogowidth: "40px",
-  spacing000: theme.space[0],
+  spacing000: `${theme.space[0]}px`,
   // 0px
   spacing025: "2px",
   spacing050: "4px",
   spacing075: "6px",
-  spacing100: theme.space[1],
+  spacing100: `${theme.space[1]}px`,
   // 8px
   spacing125: "10px",
   spacing150: "12px",
-  spacing200: theme.space[2],
+  spacing200: `${theme.space[2]}px`,
   // 16px
   spacing250: "20px",
-  spacing300: theme.space[3],
+  spacing300: `${theme.space[3]}px`,
   // 24px
-  spacing400: theme.space[4],
+  spacing400: `${theme.space[4]}px`,
   // 32px
-  spacing500: theme.space[5],
+  spacing500: `${theme.space[5]}px`,
   // 40px
-  spacing600: theme.space[6],
+  spacing600: `${theme.space[6]}px`,
   // 48px
-  spacing700: theme.space[7],
+  spacing700: `${theme.space[7]}px`,
   // 56px
-  spacing800: theme.space[8],
+  spacing800: `${theme.space[8]}px`,
   // 64px
-  spacing900: theme.space[9],
+  spacing900: `${theme.space[9]}px`,
   // 72px
   borderWidth100: "1px",
   borderWidth200: "2px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "94.6.0",
+  "version": "94.7.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -133,7 +133,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.9.0",
-    "@sage/design-tokens": "^1.65.0",
+    "@sage/design-tokens": "^1.73.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "classnames": "~2.2.6",