carbon-react 94.6.1 → 94.8.0

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

@@ -58,7 +58,7 @@ const CheckableInput = ({
   const {
     current: id
   } = (0, _react.useRef)(inputId || (0, _guid.default)());
-  const labelId = `${id}-label`;
+  const labelId = label ? `${id}-label` : undefined;
   const helpId = [error, warning, info, labelHelp].filter(validation => typeof validation === "string").length ? `${id}-help` : undefined;
   const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
   const isRadio = type === "radio";

package/lib/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -32,6 +32,7 @@ const HiddenCheckableInput = ({
   inputRef,
   onChange,
   autoFocus,
+  ariaLabelledBy,
   ...props
 }) => {
   const {
@@ -76,7 +77,7 @@ const HiddenCheckableInput = ({
     autoFocus: autoFocus,
     "aria-checked": checked,
     checked: checked,
-    "aria-labelledby": labelId,
+    "aria-labelledby": ariaLabelledBy || labelId,
     "aria-describedby": ariaDescribedBy,
     name: name,
     role: type,
@@ -135,7 +136,10 @@ HiddenCheckableInput.propTypes = {
   /** A callback to retrieve the input reference */
   inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: _propTypes.default.instanceOf(Element)
-  })])
+  })]),
+
+  /** The id of the element that labels the input */
+  ariaLabelledBy: _propTypes.default.string
 };
 
 var _default = /*#__PURE__*/_react.default.memo(HiddenCheckableInput);

package/lib/__internal__/checkable-input/hidden-checkable-input.d.ts

@@ -37,6 +37,8 @@ export interface HiddenCheckableInputProps
   fieldHelpId?: string;
   /** Element id for aria-labelledby */
   labelId?: string;
+  /** The id of the element that labels the input */
+  ariaLabelledBy?: string;
 }
 
 declare function HiddenCheckableInput(

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-checkbox/flat-table-checkbox.component.js

@@ -27,7 +27,8 @@ const FlatTableCheckbox = ({
   onClick,
   leftPosition,
   cellIndex,
-  reportCellWidth
+  reportCellWidth,
+  ariaLabelledBy
 }) => {
   const ref = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(() => {
@@ -47,7 +48,8 @@ const FlatTableCheckbox = ({
     checked: checked,
     onChange: onChange,
     name: "flat-table-checkbox",
-    mb: 0
+    mb: 0,
+    ariaLabelledBy: ariaLabelledBy
   }));
 };
 
@@ -67,6 +69,9 @@ FlatTableCheckbox.propTypes = {
   /** Whether to render the checkbox or not, defaults to true */
   selectable: _propTypes.default.bool,
 
+  /** The id of the element that labels the input */
+  ariaLabelledBy: _propTypes.default.string,
+
   /**
    * @private
    * @ignore

package/lib/components/flat-table/flat-table-checkbox/flat-table-checkbox.d.ts

@@ -11,6 +11,8 @@ export interface FlatTableCheckboxProps {
   selectable?: boolean;
   /** Callback function to be called when click event received */
   onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
+  /** The id of the element that labels the input */
+  ariaLabelledBy?: string;
 }
 
 declare function FlatTableCheckbox(props: FlatTableCheckboxProps): JSX.Element;

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.1",
+  "version": "94.8.0",
   "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",