@carbon/react 1.29.0 → 1.30.0-rc.0

package/lib/components/DataTable/TableBatchActions.js

@@ -30,15 +30,12 @@ const translationKeys = {
   'carbon.table.batch.items.selected': 'items selected',
   'carbon.table.batch.item.selected': 'item selected'
 };
-
 const translateWithId = (id, state) => {
   if (id === 'carbon.table.batch.cancel') {
     return translationKeys[id];
   }
-
   return `${state.totalSelected} ${translationKeys[id]}`;
 };
-
 const TableBatchActions = _ref => {
   let {
     className,
@@ -80,30 +77,25 @@ const TableBatchActions = _ref => {
     onClick: onCancel
   }, t('carbon.table.batch.cancel'))));
 };
-
 TableBatchActions.translationKeys = Object.keys(translationKeys);
 TableBatchActions.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
-
   /**
    * Hook required to listen for when the user initiates a cancel request
    * through this component
    */
   onCancel: PropTypes__default["default"].func.isRequired,
-
   /**
    * Boolean specifier for whether or not the batch action bar should be
    * displayed
    */
   shouldShowBatchActions: PropTypes__default["default"].bool,
-
   /**
    * Numeric representation of the total number of items selected in a table.
    * This number is used to derive the selection message
    */
   totalSelected: PropTypes__default["default"].number.isRequired,
-
   /**
    * Supply a method to translate internal strings with your i18n tool of
    * choice. Translation keys are available on the `translationKeys` field for

package/lib/components/DataTable/TableBody.js

@@ -28,7 +28,6 @@ const TableBody = _ref => {
     className: className
   }, rest), children);
 };
-
 TableBody.propTypes = {
   /**
    * `polite` Adjust the notification behavior of screen readers

package/lib/components/DataTable/TableContainer.js

@@ -61,26 +61,21 @@ const TableContainer = _ref => {
     id: descriptionId
   }, description)), children));
 };
-
 TableContainer.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
-
   /**
    * Optional description text for the Table
    */
   description: PropTypes__default["default"].node,
-
   /**
    * Specify whether the table should have a sticky header
    */
   stickyHeader: PropTypes__default["default"].bool,
-
   /**
    * Provide a title for the Table
    */
   title: PropTypes__default["default"].node,
-
   /**
    * If true, will use a width of 'fit-content' to match the inner table width
    */

package/lib/components/DataTable/TableExpandHeader.js

@@ -56,7 +56,6 @@ const TableExpandHeader = _ref => {
     "aria-label": expandIconDescription
   })) : null, children);
 };
-
 TableExpandHeader.propTypes = {
   /**
    * Specify the string read by a voice reader when the expand trigger is
@@ -65,33 +64,27 @@ TableExpandHeader.propTypes = {
   ariaLabel: PropTypes__default["default"].oneOfType([requiredIfGivenPropIsTruthy["default"]('enableExpando', PropTypes__default["default"].string), requiredIfGivenPropIsTruthy["default"]('enableToggle', PropTypes__default["default"].string)]),
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
-
   /**
    * The enableExpando prop is being replaced by enableToggle
    */
   enableExpando: deprecate["default"](PropTypes__default["default"].bool, 'The `enableExpando` prop has been deprecated in favor of `enableToggle`. This prop will be removed in the next major release.'),
-
   /**
    * Specify whether an expand all button should be displayed
    */
   enableToggle: PropTypes__default["default"].bool,
-
   /**
    * The description of the chevron right icon, to be put in its SVG `<title>` element.
    */
   expandIconDescription: PropTypes__default["default"].string,
-
   /**
    * Supply an id to the th element.
    */
   id: PropTypes__default["default"].string,
-
   /**
    * Specify whether this row is expanded or not. This helps coordinate data
    * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
   isExpanded: requiredIfGivenPropIsTruthy["default"]('enableToggle', PropTypes__default["default"].bool),
-
   /**
    * Hook for when a listener initiates a request to expand the given row
    */

package/lib/components/DataTable/TableExpandRow.js

@@ -60,7 +60,6 @@ const TableExpandRow = _ref => {
     "aria-label": expandIconDescription
   }))), children);
 };
-
 TableExpandRow.propTypes = {
   /**
    * Specify the string read by a voice reader when the expand trigger is
@@ -69,28 +68,23 @@ TableExpandRow.propTypes = {
   ariaLabel: PropTypes__default["default"].string.isRequired,
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
-
   /**
    * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
    */
   expandHeader: PropTypes__default["default"].string,
-
   /**
    * The description of the chevron right icon, to be put in its SVG `<title>` element.
    */
   expandIconDescription: PropTypes__default["default"].string,
-
   /**
    * Specify whether this row is expanded or not. This helps coordinate data
    * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
   isExpanded: PropTypes__default["default"].bool.isRequired,
-
   /**
    * Specify if the row is selected
    */
   isSelected: PropTypes__default["default"].bool,
-
   /**
    * Hook for when a listener initiates a request to expand the given row
    */

package/lib/components/DataTable/TableExpandedRow.js

@@ -32,11 +32,9 @@ const TableExpandedRow = _ref => {
   const rowRef = React.useRef(null);
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--expandable-row`, customClassName);
-
   const toggleParentHoverClass = eventType => {
     if (rowRef && rowRef.current && rowRef.current.previousElementSibling) {
       const parentNode = rowRef.current.previousElementSibling;
-
       if (eventType === 'enter') {
         parentNode.classList.add(`${prefix}--expandable-row--hover`);
       } else {
@@ -44,7 +42,6 @@ const TableExpandedRow = _ref => {
       }
     }
   };
-
   return /*#__PURE__*/React__default["default"].createElement("tr", _rollupPluginBabelHelpers["extends"]({
     ref: rowRef,
     onMouseEnter: () => toggleParentHoverClass('enter'),
@@ -58,18 +55,15 @@ const TableExpandedRow = _ref => {
     className: `${prefix}--child-row-inner-container`
   }, children)));
 };
-
 TableExpandedRow.propTypes = {
   /**
    * Pass in the contents for your TableExpandedRow
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * The width of the expanded row's internal cell
    */

package/lib/components/DataTable/TableHeader.d.ts

@@ -42,7 +42,7 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
      * attribute at the following URL:
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
      */
-    scope: string;
+    scope?: string;
     /**
      * Specify which direction we are currently sorting by, should be one of DESC,
      * NONE, or ASC.

package/lib/components/DataTable/TableHeader.js

@@ -25,10 +25,10 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const defaultScope = 'col';
 const translationKeys = {
   buttonDescription: 'carbon.table.header.icon.description'
 };
-
 const translateWithId = (key, args) => {
   if (args && key === translationKeys.buttonDescription) {
     if (args.isSortHeader && sortStates.sortStates) {
@@ -37,20 +37,15 @@ const translateWithId = (key, args) => {
       if (args.sortDirection === sortStates.sortStates.NONE) {
         return `Click to sort rows by ${args.header} header in ascending order`;
       }
-
       if (args.sortDirection === sortStates.sortStates.ASC) {
         return `Click to sort rows by ${args.header} header in descending order`;
       }
-
       return `Click to unsort rows by ${args.header} header`;
     }
-
     return `Click to sort rows by ${args.header} header in ascending order`;
   }
-
   return '';
 };
-
 const sortDirections = {
   [sortStates.sortStates.NONE]: 'none',
   [sortStates.sortStates.ASC]: 'ascending',
@@ -64,7 +59,7 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     isSortable,
     isSortHeader,
     onClick,
-    scope,
+    scope = defaultScope,
     sortDirection,
     translateWithId: t,
     id,
@@ -72,7 +67,6 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const uniqueId = useId.useId('table-sort');
-
   if (!isSortable) {
     return /*#__PURE__*/React__default["default"].createElement("th", _rollupPluginBabelHelpers["extends"]({}, rest, {
       id: id,
@@ -84,7 +78,6 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
       className: `${prefix}--table-header-label`
     }, children) : null);
   }
-
   const className = cx__default["default"](headerClassName, {
     [`${prefix}--table-sort`]: true,
     [`${prefix}--table-sort--active`]: isSortHeader && sortDirection !== sortStates.sortStates.NONE,
@@ -129,52 +122,43 @@ TableHeader.propTypes = {
    * Pass in children that will be embedded in the table header label
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify `colSpan` as a non-negative integer value to indicate how
    * many columns the TableHeader cell extends in a table
    */
   colSpan: PropTypes__default["default"].number,
-
   /**
    * Supply an id to the th element.
    */
   id: PropTypes__default["default"].string,
-
   /**
    * Specify whether this header is the header by which a table is being sorted
    * by
    */
   isSortHeader: PropTypes__default["default"].bool,
-
   /**
    * Specify whether this header is one through which a user can sort the table
    */
   isSortable: PropTypes__default["default"].bool,
-
   /**
    * Hook that is invoked when the header is clicked
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * Specify the scope of this table header. You can find more info about this
    * attribute at the following URL:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
    */
   scope: PropTypes__default["default"].string.isRequired,
-
   /**
    * Specify which direction we are currently sorting by, should be one of DESC,
    * NONE, or ASC.
    */
   sortDirection: PropTypes__default["default"].oneOf(Object.values(sortStates.sortStates)),
-
   /**
    * Supply a method to translate internal strings with your i18n tool of
    * choice. Translation keys are available on the `translationKeys` field for
@@ -184,7 +168,7 @@ TableHeader.propTypes = {
 };
 TableHeader.defaultProps = {
   isSortable: false,
-  scope: 'col',
+  scope: defaultScope,
   translateWithId
 };
 TableHeader.translationKeys = Object.values(translationKeys);

package/lib/components/DataTable/TableRow.js

@@ -23,24 +23,23 @@ var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const TableRow = props => {
-  const prefix = usePrefix.usePrefix(); // Remove unnecessary props if provided to this component, these are
+  const prefix = usePrefix.usePrefix();
+  // Remove unnecessary props if provided to this component, these are
   // only useful in `TableExpandRow`
-
   const className = cx__default["default"](props.className, {
     [`${prefix}--data-table--selected`]: props.isSelected
   });
-  const cleanProps = { ...omit__default["default"](props, ['ariaLabel', 'onExpand', 'isExpanded', 'isSelected']),
+  const cleanProps = {
+    ...omit__default["default"](props, ['ariaLabel', 'onExpand', 'isExpanded', 'isSelected']),
     className: className || undefined
   };
   return /*#__PURE__*/React__default["default"].createElement("tr", cleanProps);
 };
-
 TableRow.propTypes = {
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify if the row is selected
    */

package/lib/components/DataTable/TableSelectAll.js

@@ -46,43 +46,35 @@ const TableSelectAll = _ref => {
     disabled: disabled
   }));
 };
-
 TableSelectAll.propTypes = {
   /**
    * Specify the aria label for the underlying input control
    */
   ariaLabel: PropTypes__default["default"].string.isRequired,
-
   /**
    * Specify whether all items are selected, or not
    */
   checked: PropTypes__default["default"].bool.isRequired,
-
   /**
    * The CSS class names of the cell that wraps the underlying input control
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether the checkbox input should be disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Provide an `id` for the underlying input control
    */
   id: PropTypes__default["default"].string.isRequired,
-
   /**
    * Specify whether the selection only has a subset of all items
    */
   indeterminate: PropTypes__default["default"].bool,
-
   /**
    * Provide a `name` for the underlying input control
    */
   name: PropTypes__default["default"].string.isRequired,
-
   /**
    * Provide a handler to listen to when a user initiates a selection request
    */

package/lib/components/DataTable/TableSelectRow.js

@@ -45,7 +45,8 @@ const TableSelectRow = _ref => {
     disabled
   };
   const InlineInputComponent = radio ? RadioButton["default"] : InlineCheckbox["default"];
-  const tableSelectRowClasses = cx__default["default"](`${prefix}--table-column-checkbox`, { ...(className && {
+  const tableSelectRowClasses = cx__default["default"](`${prefix}--table-column-checkbox`, {
+    ...(className && {
       [className]: true
     }),
     [`${prefix}--table-column-radio`]: radio
@@ -59,48 +60,39 @@ const TableSelectRow = _ref => {
     ['aria-label']: ariaLabel
   })));
 };
-
 TableSelectRow.propTypes = {
   /**
    * Specify the aria label for the underlying input control
    */
   ariaLabel: PropTypes__default["default"].string.isRequired,
-
   /**
    * Specify whether this row is selected, or not
    */
   checked: PropTypes__default["default"].bool.isRequired,
-
   /**
    * The CSS class names of the cell that wraps the underlying input control
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether the control is disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Provide an `id` for the underlying input control
    */
   id: PropTypes__default["default"].string.isRequired,
-
   /**
    * Provide a `name` for the underlying input control
    */
   name: PropTypes__default["default"].string.isRequired,
-
   /**
    * Provide an optional hook that is called each time the input is updated
    */
   onChange: PropTypes__default["default"].func,
-
   /**
    * Provide a handler to listen to when a user initiates a selection request
    */
   onSelect: PropTypes__default["default"].func.isRequired,
-
   /**
    * Specify whether the control should be a radio button or inline checkbox
    */

package/lib/components/DataTable/TableToolbar.js

@@ -37,18 +37,15 @@ const TableToolbar = _ref => {
     className: className
   }), children);
 };
-
 TableToolbar.propTypes = {
   /**
    * Required props for the accessibility label of the TableToolbar
    */
   ...AriaPropTypes.AriaLabelPropType,
-
   /**
    * Pass in the children that will be rendered inside the TableToolbar
    */
   children: PropTypes__default["default"].node,
-
   /**
    * `lg` Change the row height of table
    */

package/lib/components/DataTable/TableToolbarMenu.d.ts

@@ -14,7 +14,7 @@ export interface TableToolbarMenuProps extends React.HTMLAttributes<HTMLDivEleme
     /**
      * The description of the menu icon.
      */
-    iconDescription: string;
+    iconDescription?: string;
     /**
      * Optional prop to allow overriding the default menu icon
      */

package/lib/components/DataTable/TableToolbarMenu.js

@@ -23,11 +23,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const defaultIconDescription = 'Settings';
 const TableToolbarMenu = _ref => {
   let {
     className,
     renderIcon,
-    iconDescription,
+    iconDescription = defaultIconDescription,
     children,
     ...rest
   } = _ref;
@@ -42,24 +43,20 @@ const TableToolbarMenu = _ref => {
     flipped: true
   }, rest), children);
 };
-
 TableToolbarMenu.defaultProps = {
   renderIcon: iconsReact.Settings,
-  iconDescription: 'Settings'
+  iconDescription: defaultIconDescription
 };
 TableToolbarMenu.propTypes = {
   children: PropTypes__default["default"].node.isRequired,
-
   /**
    * Provide an optional class name for the toolbar menu
    */
   className: PropTypes__default["default"].string,
-
   /**
    * The description of the menu icon.
    */
   iconDescription: PropTypes__default["default"].string.isRequired,
-
   /**
    * Optional prop to allow overriding the default menu icon
    */