carbon-react 104.51.0 → 104.52.2

package/esm/components/flat-table/flat-table-body/flat-table-body.component.js

@@ -1,11 +1,14 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from "react";
 import PropTypes from "prop-types";
 const FlatTableBody = /*#__PURE__*/React.forwardRef(({
-  children
+  children,
+  ...rest
 }, ref) => {
-  return /*#__PURE__*/React.createElement("tbody", {
+  return /*#__PURE__*/React.createElement("tbody", _extends({
     ref: ref
-  }, children);
+  }, rest), children);
 });
 FlatTableBody.propTypes = {
   /** Array of FlatTableRow. */

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.d.ts

@@ -1,5 +1,6 @@
 export default FlatTableBodyDraggable;
-declare function FlatTableBodyDraggable({ children, getOrder }: {
+declare function FlatTableBodyDraggable({ children, getOrder, ...rest }: {
+    [x: string]: any;
     children: any;
     getOrder: any;
 }): JSX.Element;

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

@@ -33,7 +33,8 @@ DropTarget.propTypes = {
 
 const FlatTableBodyDraggable = ({
   children,
-  getOrder
+  getOrder,
+  ...rest
 }) => {
   const [draggableItems, setDraggableItems] = useState(React.Children.toArray(children));
   const isFirstRender = useRef(true);
@@ -76,9 +77,9 @@ const FlatTableBodyDraggable = ({
 
   return /*#__PURE__*/React.createElement(DndProvider, {
     backend: HTML5Backend
-  }, /*#__PURE__*/React.createElement(DropTarget, {
+  }, /*#__PURE__*/React.createElement(DropTarget, _extends({
     getOrder: getItemsId
-  }, draggableItems.map(item => /*#__PURE__*/React.cloneElement(item, {
+  }, rest), draggableItems.map(item => /*#__PURE__*/React.cloneElement(item, {
     id: `${item.props.id}`,
     moveItem,
     findItem,

package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.d.ts

@@ -1,5 +1,6 @@
 export default FlatTableCheckbox;
-declare function FlatTableCheckbox({ as, checked, onChange, selectable, onClick, leftPosition, cellIndex, reportCellWidth, ariaLabelledBy, }: {
+declare function FlatTableCheckbox({ as, checked, onChange, selectable, onClick, leftPosition, cellIndex, reportCellWidth, ariaLabelledBy, ...rest }: {
+    [x: string]: any;
     as?: string | undefined;
     checked: any;
     onChange: any;

package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useLayoutEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import StyledFlatTableCheckbox from "./flat-table-checkbox.style";
@@ -12,7 +14,8 @@ const FlatTableCheckbox = ({
   leftPosition,
   cellIndex,
   reportCellWidth,
-  ariaLabelledBy
+  ariaLabelledBy,
+  ...rest
 }) => {
   const ref = useRef(null);
   useLayoutEffect(() => {
@@ -31,13 +34,13 @@ const FlatTableCheckbox = ({
     event.stopPropagation();
   };
 
-  return /*#__PURE__*/React.createElement(StyledFlatTableCheckbox, {
+  return /*#__PURE__*/React.createElement(StyledFlatTableCheckbox, _extends({
     ref: ref,
     makeCellSticky: !!reportCellWidth,
     leftPosition: leftPosition || 0,
     "data-element": dataElement,
     as: as
-  }, selectable && /*#__PURE__*/React.createElement(Checkbox, {
+  }, rest), selectable && /*#__PURE__*/React.createElement(Checkbox, {
     checked: checked,
     onChange: onChange,
     name: "flat-table-checkbox",

package/esm/components/flat-table/flat-table-head/flat-table-head.component.d.ts

@@ -1,5 +1,6 @@
 export default FlatTableHead;
-declare function FlatTableHead({ children }: {
+declare function FlatTableHead({ children, ...rest }: {
+    [x: string]: any;
     children: any;
 }): JSX.Element;
 declare namespace FlatTableHead {

package/esm/components/flat-table/flat-table-head/flat-table-head.component.js

@@ -8,7 +8,8 @@ const getRefs = length => Array.from({
 }, () => /*#__PURE__*/React.createRef());
 
 const FlatTableHead = ({
-  children
+  children,
+  ...rest
 }) => {
   const [rowHeights, setRowHeights] = useState([]);
   const refs = getRefs(React.Children.count(children));
@@ -21,10 +22,10 @@ const FlatTableHead = ({
   }, []);
 
   if (React.Children.count(children) === 1) {
-    return /*#__PURE__*/React.createElement(StyledFlatTableHead, null, children);
+    return /*#__PURE__*/React.createElement(StyledFlatTableHead, rest, children);
   }
 
-  return /*#__PURE__*/React.createElement(StyledFlatTableHead, null, React.Children.map(children, (child, index) => {
+  return /*#__PURE__*/React.createElement(StyledFlatTableHead, rest, React.Children.map(children, (child, index) => {
     /* Applies left border if preceding row has a FlatTableRowHeader and current one does not. 
        This is only needed when the preceding row has rowSpans applied, 
        as in any other use case the rows will all have FlatTableRowHeaders */

package/esm/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -28,7 +28,8 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   id,
   draggable,
   findItem,
-  moveItem
+  moveItem,
+  ...rest
 }, ref) => {
   const [isExpanded, setIsExpanded] = useState(expanded);
   let rowRef = useRef();
@@ -127,7 +128,7 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     horizontalBorderSize: horizontalBorderSize,
     applyBorderLeft: applyBorderLeft,
     draggable: draggable
-  }, interactiveRowProps), React.Children.map(children, (child, index) => {
+  }, interactiveRowProps, rest), React.Children.map(children, (child, index) => {
     return child && /*#__PURE__*/React.cloneElement(child, {
       expandable: expandable && index === firstCellIndex(),
       onClick: expandable && index === firstCellIndex() && firstColumnExpandable ? () => toggleExpanded() : undefined,

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -16,6 +16,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   defaultValue,
   id,
   name,
+  label,
   children,
   onOpen,
   onChange,
@@ -45,7 +46,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
 }, inputRef) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
   const selectListId = useRef(guid());
-  const labelId = useRef(guid());
+  const labelId = useRef(label ? guid() : undefined);
   const containerRef = useRef();
   const listboxRef = useRef();
   const isControlled = useRef(value !== undefined);
@@ -366,6 +367,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     return {
       id,
       name,
+      label,
       disabled,
       readOnly,
       inputRef: assignInput,
@@ -391,7 +393,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
-    labelId: labelId.current,
+    labelId: label ? labelId.current : undefined,
     anchorElement: textboxRef && textboxRef.parentElement,
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
@@ -426,10 +428,10 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     ref: containerRef
   }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
     activeDescendantId: activeDescendantId,
+    labelId: label ? labelId.current : undefined,
     "aria-controls": isOpen ? selectListId.current : undefined,
     isOpen: isOpen,
     hasTextCursor: true,
-    labelId: labelId.current,
     textboxRef: textboxRef
   }, getTextboxProps()))), isOpen && selectList);
 });

package/esm/components/select/select-textbox/select-textbox.component.d.ts

@@ -1,14 +1,14 @@
 export default SelectTextbox;
-declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
+declare function SelectTextbox({ accessibilityLabelId, labelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
     [x: string]: any;
-    accessibilityLabelId?: string | undefined;
+    accessibilityLabelId: any;
+    labelId: any;
     "aria-controls": any;
     value: any;
     disabled: any;
     isOpen: any;
     readOnly: any;
     placeholder: any;
-    labelId: any;
     size: any;
     onClick: any;
     onFocus: any;

package/esm/components/select/select-textbox/select-textbox.component.js

@@ -45,14 +45,14 @@ const modifiers = [{
 }];
 
 const SelectTextbox = ({
-  accessibilityLabelId = "",
+  accessibilityLabelId,
+  labelId,
   "aria-controls": ariaControls,
   value,
   disabled,
   isOpen,
   readOnly,
   placeholder,
-  labelId,
   size,
   onClick,
   onFocus,
@@ -133,9 +133,12 @@ const SelectTextbox = ({
   }
 
   function getInputAriaAttributes() {
+    const joinIds = (...ids) => ids.filter(item => item !== undefined).join(" ");
+
+    const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
     return {
       "aria-expanded": isOpen,
-      "aria-labelledby": hasTextCursor ? `${labelId} ${accessibilityLabelId}` : `${labelId} ${textId.current}`,
+      "aria-labelledby": ariaLabelledby || undefined,
       "aria-activedescendant": activeDescendantId,
       "aria-controls": ariaControls,
       "aria-autocomplete": hasTextCursor ? "both" : undefined,

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

@@ -11,12 +11,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const FlatTableBody = /*#__PURE__*/_react.default.forwardRef(({
-  children
+  children,
+  ...rest
 }, ref) => {
-  return /*#__PURE__*/_react.default.createElement("tbody", {
+  return /*#__PURE__*/_react.default.createElement("tbody", _extends({
     ref: ref
-  }, children);
+  }, rest), children);
 });
 
 FlatTableBody.propTypes = {

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

@@ -1,5 +1,6 @@
 export default FlatTableBodyDraggable;
-declare function FlatTableBodyDraggable({ children, getOrder }: {
+declare function FlatTableBodyDraggable({ children, getOrder, ...rest }: {
+    [x: string]: any;
     children: any;
     getOrder: any;
 }): JSX.Element;

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

@@ -52,7 +52,8 @@ DropTarget.propTypes = {
 
 const FlatTableBodyDraggable = ({
   children,
-  getOrder
+  getOrder,
+  ...rest
 }) => {
   const [draggableItems, setDraggableItems] = (0, _react.useState)(_react.default.Children.toArray(children));
   const isFirstRender = (0, _react.useRef)(true);
@@ -95,9 +96,9 @@ const FlatTableBodyDraggable = ({
 
   return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
     backend: _reactDndHtml5Backend.HTML5Backend
-  }, /*#__PURE__*/_react.default.createElement(DropTarget, {
+  }, /*#__PURE__*/_react.default.createElement(DropTarget, _extends({
     getOrder: getItemsId
-  }, draggableItems.map(item => /*#__PURE__*/_react.default.cloneElement(item, {
+  }, rest), draggableItems.map(item => /*#__PURE__*/_react.default.cloneElement(item, {
     id: `${item.props.id}`,
     moveItem,
     findItem,

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

@@ -1,5 +1,6 @@
 export default FlatTableCheckbox;
-declare function FlatTableCheckbox({ as, checked, onChange, selectable, onClick, leftPosition, cellIndex, reportCellWidth, ariaLabelledBy, }: {
+declare function FlatTableCheckbox({ as, checked, onChange, selectable, onClick, leftPosition, cellIndex, reportCellWidth, ariaLabelledBy, ...rest }: {
+    [x: string]: any;
     as?: string | undefined;
     checked: any;
     onChange: any;

package/lib/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js

@@ -19,6 +19,8 @@ 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; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const FlatTableCheckbox = ({
   as = "td",
   checked,
@@ -28,7 +30,8 @@ const FlatTableCheckbox = ({
   leftPosition,
   cellIndex,
   reportCellWidth,
-  ariaLabelledBy
+  ariaLabelledBy,
+  ...rest
 }) => {
   const ref = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(() => {
@@ -47,13 +50,13 @@ const FlatTableCheckbox = ({
     event.stopPropagation();
   };
 
-  return /*#__PURE__*/_react.default.createElement(_flatTableCheckbox.default, {
+  return /*#__PURE__*/_react.default.createElement(_flatTableCheckbox.default, _extends({
     ref: ref,
     makeCellSticky: !!reportCellWidth,
     leftPosition: leftPosition || 0,
     "data-element": dataElement,
     as: as
-  }, selectable && /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+  }, rest), selectable && /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
     checked: checked,
     onChange: onChange,
     name: "flat-table-checkbox",

package/lib/components/flat-table/flat-table-head/flat-table-head.component.d.ts

@@ -1,5 +1,6 @@
 export default FlatTableHead;
-declare function FlatTableHead({ children }: {
+declare function FlatTableHead({ children, ...rest }: {
+    [x: string]: any;
     children: any;
 }): JSX.Element;
 declare namespace FlatTableHead {

package/lib/components/flat-table/flat-table-head/flat-table-head.component.js

@@ -24,7 +24,8 @@ const getRefs = length => Array.from({
 }, () => /*#__PURE__*/_react.default.createRef());
 
 const FlatTableHead = ({
-  children
+  children,
+  ...rest
 }) => {
   const [rowHeights, setRowHeights] = (0, _react.useState)([]);
   const refs = getRefs(_react.default.Children.count(children));
@@ -37,10 +38,10 @@ const FlatTableHead = ({
   }, []);
 
   if (_react.default.Children.count(children) === 1) {
-    return /*#__PURE__*/_react.default.createElement(_flatTableHead.default, null, children);
+    return /*#__PURE__*/_react.default.createElement(_flatTableHead.default, rest, children);
   }
 
-  return /*#__PURE__*/_react.default.createElement(_flatTableHead.default, null, _react.default.Children.map(children, (child, index) => {
+  return /*#__PURE__*/_react.default.createElement(_flatTableHead.default, rest, _react.default.Children.map(children, (child, index) => {
     /* Applies left border if preceding row has a FlatTableRowHeader and current one does not. 
        This is only needed when the preceding row has rowSpans applied, 
        as in any other use case the rows will all have FlatTableRowHeaders */

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

@@ -50,7 +50,8 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   id,
   draggable,
   findItem,
-  moveItem
+  moveItem,
+  ...rest
 }, ref) => {
   const [isExpanded, setIsExpanded] = (0, _react.useState)(expanded);
   let rowRef = (0, _react.useRef)();
@@ -151,7 +152,7 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     horizontalBorderSize: horizontalBorderSize,
     applyBorderLeft: applyBorderLeft,
     draggable: draggable
-  }, interactiveRowProps), _react.default.Children.map(children, (child, index) => {
+  }, interactiveRowProps, rest), _react.default.Children.map(children, (child, index) => {
     return child && /*#__PURE__*/_react.default.cloneElement(child, {
       expandable: expandable && index === firstCellIndex(),
       onClick: expandable && index === firstCellIndex() && firstColumnExpandable ? () => toggleExpanded() : undefined,

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -40,6 +40,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   defaultValue,
   id,
   name,
+  label,
   children,
   onOpen,
   onChange,
@@ -69,7 +70,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
 }, inputRef) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
   const selectListId = (0, _react.useRef)((0, _guid.default)());
-  const labelId = (0, _react.useRef)((0, _guid.default)());
+  const labelId = (0, _react.useRef)(label ? (0, _guid.default)() : undefined);
   const containerRef = (0, _react.useRef)();
   const listboxRef = (0, _react.useRef)();
   const isControlled = (0, _react.useRef)(value !== undefined);
@@ -390,6 +391,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     return {
       id,
       name,
+      label,
       disabled,
       readOnly,
       inputRef: assignInput,
@@ -415,7 +417,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   const selectList = /*#__PURE__*/_react.default.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
-    labelId: labelId.current,
+    labelId: label ? labelId.current : undefined,
     anchorElement: textboxRef && textboxRef.parentElement,
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
@@ -451,10 +453,10 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
     activeDescendantId: activeDescendantId,
+    labelId: label ? labelId.current : undefined,
     "aria-controls": isOpen ? selectListId.current : undefined,
     isOpen: isOpen,
     hasTextCursor: true,
-    labelId: labelId.current,
     textboxRef: textboxRef
   }, getTextboxProps()))), isOpen && selectList);
 });

package/lib/components/select/select-textbox/select-textbox.component.d.ts

@@ -1,14 +1,14 @@
 export default SelectTextbox;
-declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
+declare function SelectTextbox({ accessibilityLabelId, labelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
     [x: string]: any;
-    accessibilityLabelId?: string | undefined;
+    accessibilityLabelId: any;
+    labelId: any;
     "aria-controls": any;
     value: any;
     disabled: any;
     isOpen: any;
     readOnly: any;
     placeholder: any;
-    labelId: any;
     size: any;
     onClick: any;
     onFocus: any;

package/lib/components/select/select-textbox/select-textbox.component.js

@@ -66,14 +66,14 @@ const modifiers = [{
 }];
 
 const SelectTextbox = ({
-  accessibilityLabelId = "",
+  accessibilityLabelId,
+  labelId,
   "aria-controls": ariaControls,
   value,
   disabled,
   isOpen,
   readOnly,
   placeholder,
-  labelId,
   size,
   onClick,
   onFocus,
@@ -154,9 +154,12 @@ const SelectTextbox = ({
   }
 
   function getInputAriaAttributes() {
+    const joinIds = (...ids) => ids.filter(item => item !== undefined).join(" ");
+
+    const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
     return {
       "aria-expanded": isOpen,
-      "aria-labelledby": hasTextCursor ? `${labelId} ${accessibilityLabelId}` : `${labelId} ${textId.current}`,
+      "aria-labelledby": ariaLabelledby || undefined,
       "aria-activedescendant": activeDescendantId,
       "aria-controls": ariaControls,
       "aria-autocomplete": hasTextCursor ? "both" : undefined,

package/package.json

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