@carbon/react 1.29.1 → 1.30.0-rc.0

package/es/components/DataTable/TableBatchActions.js

@@ -20,15 +20,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,
@@ -70,30 +67,25 @@ const TableBatchActions = _ref => {
     onClick: onCancel
   }, t('carbon.table.batch.cancel'))));
 };
-
 TableBatchActions.translationKeys = Object.keys(translationKeys);
 TableBatchActions.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-
   /**
    * Hook required to listen for when the user initiates a cancel request
    * through this component
    */
   onCancel: PropTypes.func.isRequired,
-
   /**
    * Boolean specifier for whether or not the batch action bar should be
    * displayed
    */
   shouldShowBatchActions: PropTypes.bool,
-
   /**
    * Numeric representation of the total number of items selected in a table.
    * This number is used to derive the selection message
    */
   totalSelected: PropTypes.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/es/components/DataTable/TableBody.js

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

package/es/components/DataTable/TableContainer.js

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

package/es/components/DataTable/TableExpandHeader.js

@@ -46,7 +46,6 @@ const TableExpandHeader = _ref => {
     "aria-label": expandIconDescription
   })) : null, children);
 };
-
 TableExpandHeader.propTypes = {
   /**
    * Specify the string read by a voice reader when the expand trigger is
@@ -55,33 +54,27 @@ TableExpandHeader.propTypes = {
   ariaLabel: PropTypes.oneOfType([requiredIfGivenPropIsTruthy('enableExpando', PropTypes.string), requiredIfGivenPropIsTruthy('enableToggle', PropTypes.string)]),
   children: PropTypes.node,
   className: PropTypes.string,
-
   /**
    * The enableExpando prop is being replaced by enableToggle
    */
   enableExpando: deprecate(PropTypes.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.bool,
-
   /**
    * The description of the chevron right icon, to be put in its SVG `<title>` element.
    */
   expandIconDescription: PropTypes.string,
-
   /**
    * Supply an id to the th element.
    */
   id: PropTypes.string,
-
   /**
    * Specify whether this row is expanded or not. This helps coordinate data
    * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
   isExpanded: requiredIfGivenPropIsTruthy('enableToggle', PropTypes.bool),
-
   /**
    * Hook for when a listener initiates a request to expand the given row
    */

package/es/components/DataTable/TableExpandRow.js

@@ -50,7 +50,6 @@ const TableExpandRow = _ref => {
     "aria-label": expandIconDescription
   }))), children);
 };
-
 TableExpandRow.propTypes = {
   /**
    * Specify the string read by a voice reader when the expand trigger is
@@ -59,28 +58,23 @@ TableExpandRow.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
   children: PropTypes.node,
   className: PropTypes.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.string,
-
   /**
    * The description of the chevron right icon, to be put in its SVG `<title>` element.
    */
   expandIconDescription: PropTypes.string,
-
   /**
    * Specify whether this row is expanded or not. This helps coordinate data
    * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
   isExpanded: PropTypes.bool.isRequired,
-
   /**
    * Specify if the row is selected
    */
   isSelected: PropTypes.bool,
-
   /**
    * Hook for when a listener initiates a request to expand the given row
    */

package/es/components/DataTable/TableExpandedRow.js

@@ -22,11 +22,9 @@ const TableExpandedRow = _ref => {
   const rowRef = useRef(null);
   const prefix = usePrefix();
   const className = cx(`${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 {
@@ -34,7 +32,6 @@ const TableExpandedRow = _ref => {
       }
     }
   };
-
   return /*#__PURE__*/React__default.createElement("tr", _extends({
     ref: rowRef,
     onMouseEnter: () => toggleParentHoverClass('enter'),
@@ -48,18 +45,15 @@ const TableExpandedRow = _ref => {
     className: `${prefix}--child-row-inner-container`
   }, children)));
 };
-
 TableExpandedRow.propTypes = {
   /**
    * Pass in the contents for your TableExpandedRow
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes.string,
-
   /**
    * The width of the expanded row's internal cell
    */

package/es/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/es/components/DataTable/TableHeader.js

@@ -15,10 +15,10 @@ import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { sortStates } from './state/sortStates.js';
 
+const defaultScope = 'col';
 const translationKeys = {
   buttonDescription: 'carbon.table.header.icon.description'
 };
-
 const translateWithId = (key, args) => {
   if (args && key === translationKeys.buttonDescription) {
     if (args.isSortHeader && sortStates) {
@@ -27,20 +27,15 @@ const translateWithId = (key, args) => {
       if (args.sortDirection === sortStates.NONE) {
         return `Click to sort rows by ${args.header} header in ascending order`;
       }
-
       if (args.sortDirection === 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.NONE]: 'none',
   [sortStates.ASC]: 'ascending',
@@ -54,7 +49,7 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     isSortable,
     isSortHeader,
     onClick,
-    scope,
+    scope = defaultScope,
     sortDirection,
     translateWithId: t,
     id,
@@ -62,7 +57,6 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
   } = _ref;
   const prefix = usePrefix();
   const uniqueId = useId('table-sort');
-
   if (!isSortable) {
     return /*#__PURE__*/React__default.createElement("th", _extends({}, rest, {
       id: id,
@@ -74,7 +68,6 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
       className: `${prefix}--table-header-label`
     }, children) : null);
   }
-
   const className = cx(headerClassName, {
     [`${prefix}--table-sort`]: true,
     [`${prefix}--table-sort--active`]: isSortHeader && sortDirection !== sortStates.NONE,
@@ -119,52 +112,43 @@ TableHeader.propTypes = {
    * Pass in children that will be embedded in the table header label
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes.string,
-
   /**
    * Specify `colSpan` as a non-negative integer value to indicate how
    * many columns the TableHeader cell extends in a table
    */
   colSpan: PropTypes.number,
-
   /**
    * Supply an id to the th element.
    */
   id: PropTypes.string,
-
   /**
    * Specify whether this header is the header by which a table is being sorted
    * by
    */
   isSortHeader: PropTypes.bool,
-
   /**
    * Specify whether this header is one through which a user can sort the table
    */
   isSortable: PropTypes.bool,
-
   /**
    * Hook that is invoked when the header is clicked
    */
   onClick: PropTypes.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.string.isRequired,
-
   /**
    * Specify which direction we are currently sorting by, should be one of DESC,
    * NONE, or ASC.
    */
   sortDirection: PropTypes.oneOf(Object.values(sortStates)),
-
   /**
    * Supply a method to translate internal strings with your i18n tool of
    * choice. Translation keys are available on the `translationKeys` field for
@@ -174,7 +158,7 @@ TableHeader.propTypes = {
 };
 TableHeader.defaultProps = {
   isSortable: false,
-  scope: 'col',
+  scope: defaultScope,
   translateWithId
 };
 TableHeader.translationKeys = Object.values(translationKeys);

package/es/components/DataTable/TableRow.js

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

package/es/components/DataTable/TableSelectAll.js

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

package/es/components/DataTable/TableSelectRow.js

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

package/es/components/DataTable/TableToolbar.js

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

package/es/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/es/components/DataTable/TableToolbarMenu.js

@@ -13,11 +13,12 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import OverflowMenu from '../OverflowMenu/index.js';
 
+const defaultIconDescription = 'Settings';
 const TableToolbarMenu = _ref => {
   let {
     className,
     renderIcon,
-    iconDescription,
+    iconDescription = defaultIconDescription,
     children,
     ...rest
   } = _ref;
@@ -32,24 +33,20 @@ const TableToolbarMenu = _ref => {
     flipped: true
   }, rest), children);
 };
-
 TableToolbarMenu.defaultProps = {
   renderIcon: Settings,
-  iconDescription: 'Settings'
+  iconDescription: defaultIconDescription
 };
 TableToolbarMenu.propTypes = {
   children: PropTypes.node.isRequired,
-
   /**
    * Provide an optional class name for the toolbar menu
    */
   className: PropTypes.string,
-
   /**
    * The description of the menu icon.
    */
   iconDescription: PropTypes.string.isRequired,
-
   /**
    * Optional prop to allow overriding the default menu icon
    */

package/es/components/DataTable/TableToolbarSearch.js

@@ -19,11 +19,9 @@ const translationKeys = {
   'carbon.table.toolbar.search.label': 'Filter table',
   'carbon.table.toolbar.search.placeholder': 'Filter table'
 };
-
 const translateWithId = id => {
   return translationKeys[id];
 };
-
 const TableToolbarSearch = _ref => {
   let {
     className,
@@ -64,7 +62,8 @@ const TableToolbarSearch = _ref => {
     if (defaultValue) {
       onChangeProp('', defaultValue);
     }
-  }, //eslint-disable-next-line react-hooks/exhaustive-deps
+  },
+  //eslint-disable-next-line react-hooks/exhaustive-deps
   []);
   const searchClasses = cx(className, {
     [searchContainerClass]: searchContainerClass,
@@ -73,33 +72,25 @@ const TableToolbarSearch = _ref => {
     [`${prefix}--toolbar-search-container-expandable`]: !persistent,
     [`${prefix}--toolbar-search-container-persistent`]: persistent
   });
-
   const handleExpand = function (event) {
     let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
-
     if (!disabled) {
       if (!controlled && !persistent) {
         setExpandedState(value);
       }
-
       if (onExpand) {
         onExpand(event, value);
       }
     }
   };
-
   const onChange = e => {
     setValue(e.target.value);
-
     if (onChangeProp) {
       onChangeProp(e);
     }
   };
-
   const handleOnFocus = event => handleExpand(event, true);
-
   const handleOnBlur = event => !value && handleExpand(event, false);
-
   return /*#__PURE__*/React__default.createElement(Search, _extends({
     disabled: disabled,
     className: searchClasses,
@@ -114,99 +105,80 @@ const TableToolbarSearch = _ref => {
     size: size
   }, rest));
 };
-
 TableToolbarSearch.propTypes = {
   children: PropTypes.node,
-
   /**
    * Provide an optional class name for the search container
    */
   className: PropTypes.string,
-
   /**
    * Specifies if the search should initially render in an expanded state
    */
   defaultExpanded: PropTypes.bool,
-
   /**
    * Provide an optional default value for the Search component
    */
   defaultValue: PropTypes.string,
-
   /**
    * Specifies if the search should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Specifies if the search should expand
    */
   expanded: PropTypes.bool,
-
   /**
    * Provide an optional id for the search container
    */
   id: PropTypes.string,
-
   /**
    * Provide an optional label text for the Search component icon
    */
   labelText: PropTypes.string,
-
   /**
    * Provide an optional function to be called when the search input loses focus, this will be
    * passed the event as the first parameter and a function to handle the expanding of the search
    * input as the second
    */
   onBlur: PropTypes.func,
-
   /**
    * Provide an optional hook that is called each time the input is updated
    */
   onChange: PropTypes.func,
-
   /**
    * Optional callback called when the search value is cleared.
    */
   onClear: PropTypes.func,
-
   /**
    * Provide an optional hook that is called each time the input is expanded
    */
   onExpand: PropTypes.func,
-
   /**
    * Provide an optional function to be called when the search input gains focus, this will be
    * passed the event as the first parameter and a function to handle the expanding of the search
    * input as the second.
    */
   onFocus: PropTypes.func,
-
   /**
    * Whether the search should be allowed to expand
    */
   persistent: PropTypes.bool,
-
   /**
    * Provide an optional placeholder text for the Search component
    */
   placeholder: PropTypes.string,
-
   /**
    * Provide an optional className for the overall container of the Search
    */
   searchContainerClass: PropTypes.string,
-
   /**
    * Specify the size of the Search
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-
   /**
    * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
    */
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /**
    * Provide custom text for the component for each translation id
    */