@carbon/react 1.83.0 → 1.84.0-rc.0

package/lib/components/DataTable/TableBatchAction.js

@@ -21,17 +21,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableBatchAction = _ref => {
-  let {
-    renderIcon = iconsReact.AddFilled,
-    iconDescription = 'Add',
-    ...props
-  } = _ref;
-  return /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
-    renderIcon: renderIcon,
-    iconDescription: iconDescription
-  }, props));
-};
+const TableBatchAction = ({
+  renderIcon = iconsReact.AddFilled,
+  iconDescription = 'Add',
+  ...props
+}) => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
+  renderIcon: renderIcon,
+  iconDescription: iconDescription
+}, props));
 TableBatchAction.propTypes = {
   /**
    * Specify if the button is an icon-only button

package/lib/components/DataTable/TableBatchActions.js

@@ -33,14 +33,13 @@ const translationKeys = {
   'carbon.table.batch.item.selected': 'item selected',
   'carbon.table.batch.selectAll': 'Select all'
 };
-const translateWithId = function (id) {
-  let {
-    totalSelected,
-    totalCount
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    totalSelected: 0,
-    totalCount: 0
-  };
+const translateWithId = (id, {
+  totalSelected,
+  totalCount
+} = {
+  totalSelected: 0,
+  totalCount: 0
+}) => {
   if (id === 'carbon.table.batch.cancel') {
     return translationKeys[id];
   }
@@ -49,18 +48,17 @@ const translateWithId = function (id) {
   }
   return `${totalSelected} ${translationKeys[id]}`;
 };
-const TableBatchActions = _ref => {
-  let {
-    className,
-    children,
-    shouldShowBatchActions,
-    totalSelected,
-    totalCount,
-    onCancel,
-    onSelectAll,
-    translateWithId: t = translateWithId,
-    ...rest
-  } = _ref;
+const TableBatchActions = ({
+  className,
+  children,
+  shouldShowBatchActions,
+  totalSelected,
+  totalCount,
+  onCancel,
+  onSelectAll,
+  translateWithId: t = translateWithId,
+  ...rest
+}) => {
   const [isScrolling, setIsScrolling] = React__default["default"].useState(false);
   const prefix = usePrefix.usePrefix();
   const batchActionsClasses = cx__default["default"]({

package/lib/components/DataTable/TableBody.js

@@ -18,17 +18,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableBody = _ref => {
-  let {
-    children,
-    className,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/React__default["default"].createElement("tbody", _rollupPluginBabelHelpers["extends"]({
-    "aria-live": rest['aria-live'] ?? 'polite',
-    className: className
-  }, rest), children);
-};
+const TableBody = ({
+  children,
+  className,
+  ...rest
+}) => /*#__PURE__*/React__default["default"].createElement("tbody", _rollupPluginBabelHelpers["extends"]({
+  "aria-live": rest['aria-live'] ?? 'polite',
+  className: className
+}, rest), children);
 TableBody.propTypes = {
   /**
    * `polite` Adjust the notification behavior of screen readers

package/lib/components/DataTable/TableContainer.js

@@ -24,16 +24,15 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableContainer = _ref => {
-  let {
-    className,
-    children,
-    title,
-    description,
-    stickyHeader,
-    useStaticWidth,
-    ...rest
-  } = _ref;
+const TableContainer = ({
+  className,
+  children,
+  title,
+  description,
+  stickyHeader,
+  useStaticWidth,
+  ...rest
+}) => {
   const baseId = useId.useId('tc');
   const titleId = `${baseId}-title`;
   const descriptionId = `${baseId}-description`;

package/lib/components/DataTable/TableDecoratorRow.js

@@ -20,11 +20,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const TableDecoratorRow = _ref => {
-  let {
-    className,
-    decorator
-  } = _ref;
+const TableDecoratorRow = ({
+  className,
+  decorator
+}) => {
   const prefix = usePrefix.usePrefix();
   const TableDecoratorRowClasses = cx__default["default"]({
     ...(className && {

package/lib/components/DataTable/TableExpandHeader.js

@@ -24,21 +24,20 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableExpandHeader = _ref => {
-  let {
-    ['aria-controls']: ariaControls,
-    ['aria-label']: ariaLabel,
-    ariaLabel: deprecatedAriaLabel,
-    className: headerClassName,
-    enableExpando,
-    enableToggle,
-    id = 'expand',
-    isExpanded,
-    onExpand,
-    expandIconDescription,
-    children,
-    ...rest
-  } = _ref;
+const TableExpandHeader = ({
+  ['aria-controls']: ariaControls,
+  ['aria-label']: ariaLabel,
+  ariaLabel: deprecatedAriaLabel,
+  className: headerClassName,
+  enableExpando,
+  enableToggle,
+  id = 'expand',
+  isExpanded,
+  onExpand,
+  expandIconDescription,
+  children,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--table-expand`, headerClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;

package/lib/components/DataTable/TableExpandRow.js

@@ -23,20 +23,19 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
-    ['aria-controls']: ariaControls,
-    ['aria-label']: ariaLabel,
-    ariaLabel: deprecatedAriaLabel,
-    className: rowClassName,
-    children,
-    isExpanded,
-    onExpand,
-    expandIconDescription,
-    isSelected,
-    expandHeader = 'expand',
-    ...rest
-  } = _ref;
+const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef(({
+  ['aria-controls']: ariaControls,
+  ['aria-label']: ariaLabel,
+  ariaLabel: deprecatedAriaLabel,
+  className: rowClassName,
+  children,
+  isExpanded,
+  onExpand,
+  expandIconDescription,
+  isSelected,
+  expandHeader = 'expand',
+  ...rest
+}, ref) => {
   const prefix = usePrefix.usePrefix();
 
   // We need to put the AILabel and Decorator before the expansion arrow and all other table cells after the arrow.

package/lib/components/DataTable/TableExpandedRow.js

@@ -22,13 +22,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableExpandedRow = _ref => {
-  let {
-    className: customClassName,
-    children,
-    colSpan,
-    ...rest
-  } = _ref;
+const TableExpandedRow = ({
+  className: customClassName,
+  children,
+  colSpan,
+  ...rest
+}) => {
   const rowRef = React.useRef(null);
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--expandable-row`, customClassName);

package/lib/components/DataTable/TableHeader.js

@@ -51,22 +51,21 @@ const sortDirections = {
   [sortStates.sortStates.ASC]: 'ascending',
   [sortStates.sortStates.DESC]: 'descending'
 };
-const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function TableHeader(_ref, ref) {
-  let {
-    className: headerClassName,
-    children,
-    colSpan,
-    decorator,
-    isSortable = false,
-    isSortHeader,
-    onClick,
-    scope = defaultScope,
-    sortDirection,
-    translateWithId: t = translateWithId,
-    slug,
-    id,
-    ...rest
-  } = _ref;
+const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function TableHeader({
+  className: headerClassName,
+  children,
+  colSpan,
+  decorator,
+  isSortable = false,
+  isSortHeader,
+  onClick,
+  scope = defaultScope,
+  sortDirection,
+  translateWithId: t = translateWithId,
+  slug,
+  id,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const uniqueId = useId.useId('table-sort');
 

package/lib/components/DataTable/TableSelectAll.js

@@ -22,18 +22,17 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const TableSelectAll = _ref => {
-  let {
-    ariaLabel: deprecatedAriaLabel = 'Select all rows in the table',
-    ['aria-label']: ariaLabel,
-    checked,
-    id,
-    indeterminate,
-    name,
-    onSelect,
-    disabled,
-    className
-  } = _ref;
+const TableSelectAll = ({
+  ariaLabel: deprecatedAriaLabel = 'Select all rows in the table',
+  ['aria-label']: ariaLabel,
+  checked,
+  id,
+  indeterminate,
+  name,
+  onSelect,
+  disabled,
+  className
+}) => {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("th", {
     "aria-live": "off",

package/lib/components/DataTable/TableSelectRow.js

@@ -25,19 +25,18 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const TableSelectRow = _ref => {
-  let {
-    ariaLabel: deprecatedAriaLabel,
-    ['aria-label']: ariaLabel,
-    checked,
-    id,
-    name,
-    onSelect,
-    onChange,
-    disabled,
-    radio,
-    className
-  } = _ref;
+const TableSelectRow = ({
+  ariaLabel: deprecatedAriaLabel,
+  ['aria-label']: ariaLabel,
+  checked,
+  id,
+  name,
+  onSelect,
+  onChange,
+  disabled,
+  radio,
+  className
+}) => {
   const prefix = usePrefix.usePrefix();
   const uniqueNameId = useId.useId();
   const handleRadioChange = onChange ? (value, name, event) => {

package/lib/components/DataTable/TableSlugRow.js

@@ -21,11 +21,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const TableSlugRow = _ref => {
-  let {
-    className,
-    slug
-  } = _ref;
+const TableSlugRow = ({
+  className,
+  slug
+}) => {
   React.useEffect(() => {
     deprecateComponent["default"]('TableSlugRow', 'The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.');
   }, []);

package/lib/components/DataTable/TableToolbar.js

@@ -22,14 +22,13 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableToolbar = _ref => {
-  let {
-    ['aria-label']: ariaLabel = 'data table toolbar',
-    ariaLabel: deprecatedAriaLabel,
-    children,
-    size,
-    ...rest
-  } = _ref;
+const TableToolbar = ({
+  ['aria-label']: ariaLabel = 'data table toolbar',
+  ariaLabel: deprecatedAriaLabel,
+  children,
+  size,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
     [`${prefix}--table-toolbar`]: true,

package/lib/components/DataTable/TableToolbarMenu.js

@@ -24,15 +24,14 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const defaultIconDescription = 'Settings';
-const TableToolbarMenu = _ref => {
-  let {
-    className,
-    renderIcon = iconsReact.Settings,
-    iconDescription = defaultIconDescription,
-    children,
-    menuOptionsClass,
-    ...rest
-  } = _ref;
+const TableToolbarMenu = ({
+  className,
+  renderIcon = iconsReact.Settings,
+  iconDescription = defaultIconDescription,
+  children,
+  menuOptionsClass,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const toolbarActionClasses = cx__default["default"](className, `${prefix}--toolbar-action ${prefix}--overflow-menu`);
   const menuOptionsClasses = cx__default["default"](menuOptionsClass, `${prefix}--toolbar-action__menu`);

package/lib/components/DataTable/TableToolbarSearch.js

@@ -36,28 +36,27 @@ const translationKeys = {
 const translateWithId = id => {
   return translationKeys[id];
 };
-const TableToolbarSearch = _ref => {
-  let {
-    className,
-    searchContainerClass,
-    onChange: onChangeProp,
-    onClear = noopFn.noopFn,
-    translateWithId: t = translateWithId,
-    placeholder,
-    labelText,
-    expanded: expandedProp,
-    defaultExpanded,
-    defaultValue,
-    disabled,
-    onExpand,
-    persistent = false,
-    id,
-    onBlur,
-    onFocus,
-    size = 'lg',
-    tabIndex = '0',
-    ...rest
-  } = _ref;
+const TableToolbarSearch = ({
+  className,
+  searchContainerClass,
+  onChange: onChangeProp,
+  onClear = noopFn.noopFn,
+  translateWithId: t = translateWithId,
+  placeholder,
+  labelText,
+  expanded: expandedProp,
+  defaultExpanded,
+  defaultValue,
+  disabled,
+  onExpand,
+  persistent = false,
+  id,
+  onBlur,
+  onFocus,
+  size = 'lg',
+  tabIndex = '0',
+  ...rest
+}) => {
   const {
     current: controlled
   } = React.useRef(expandedProp !== undefined);
@@ -88,8 +87,7 @@ 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;
+  const handleExpand = (event, value = !expanded) => {
     if (!disabled) {
       if (!controlled && !persistent) {
         setExpandedState(value);

package/lib/components/DataTable/state/sorting.js

@@ -43,10 +43,9 @@ const getNextSortDirection = (prevHeader, header, prevState) => {
   // in descending order by default
   return sortStates.sortStates.ASC;
 };
-const getNextSortState = (props, state, _ref) => {
-  let {
-    key
-  } = _ref;
+const getNextSortState = (props, state, {
+  key
+}) => {
   const {
     sortDirection,
     sortHeaderKey

package/lib/components/DataTable/tools/filter.js

@@ -13,20 +13,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * Filters row IDs based on whether any of the cell values in the row include
  * the input value as a substring. Boolean cell values are ignored.
  */
-const defaultFilterRows = _ref => {
-  let {
-    rowIds,
-    headers,
-    cellsById,
-    inputValue,
-    getCellId
-  } = _ref;
+const defaultFilterRows = ({
+  rowIds,
+  headers,
+  cellsById,
+  inputValue,
+  getCellId
+}) => {
   const normalizedInput = inputValue.trim().toLowerCase();
   if (!normalizedInput) return rowIds;
-  return rowIds.filter(rowId => headers.some(_ref2 => {
-    let {
-      key
-    } = _ref2;
+  return rowIds.filter(rowId => headers.some(({
+    key
+  }) => {
     const cellId = getCellId(rowId, key);
     const cell = cellsById[cellId];
     if (typeof cell.value === 'boolean') return false;

package/lib/components/DataTable/tools/normalize.js

@@ -18,8 +18,7 @@ var cells = require('./cells.js');
  * @param {Array<object>} headers
  * @returns {object}
  */
-const normalize = function (rows, headers) {
-  let prevState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+const normalize = (rows, headers, prevState = {}) => {
   const {
     rowsById: prevRowsByIds
   } = prevState;
@@ -50,12 +49,11 @@ const normalize = function (rows, headers) {
       rowsById[row.id].isSelected = prevRowsByIds[row.id].isSelected;
       rowsById[row.id].isExpanded = prevRowsByIds[row.id].isExpanded;
     }
-    headers.forEach((_ref, i) => {
-      let {
-        key,
-        slug,
-        decorator
-      } = _ref;
+    headers.forEach(({
+      key,
+      slug,
+      decorator
+    }, i) => {
       const id = cells.getCellId(row.id, key);
       // Initialize the cell info and state values, namely for editing
       cellsById[id] = {

package/lib/components/DataTable/tools/sorting.js

@@ -17,8 +17,7 @@ var sortStates = require('../state/sortStates.js');
  * type, the default sort algorithm will be used for those types. Otherwise, the
  * values will be converted to strings for comparison.
  */
-const compare = function (a, b) {
-  let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
+const compare = (a, b, locale = 'en') => {
   // prevent multiple null values in one column (sorting breaks)
   if (a === null) a = '';
   if (b === null) b = '';
@@ -41,8 +40,7 @@ const compare = function (a, b) {
  *
  * Note: Uses numeric comparison if strings are numeric.
  */
-const compareStrings = function (a, b) {
-  let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
+const compareStrings = (a, b, locale = 'en') => {
   const isNumeric = !isNaN(parseFloat(a)) && !isNaN(parseFloat(b));
   return a.localeCompare(b, locale, {
     numeric: isNumeric
@@ -51,38 +49,34 @@ const compareStrings = function (a, b) {
 /**
  * Sorts table rows based on the provided column key and direction.
  */
-const sortRows = _ref => {
-  let {
-    rowIds,
-    cellsById,
-    sortDirection,
+const sortRows = ({
+  rowIds,
+  cellsById,
+  sortDirection,
+  key,
+  locale = 'en',
+  sortRow = defaultSortRow
+}) => rowIds.slice().sort((a, b) => {
+  const cellA = cellsById[cells.getCellId(a, key)];
+  const cellB = cellsById[cells.getCellId(b, key)];
+  return sortRow(cellA?.value, cellB?.value, {
     key,
-    locale = 'en',
-    sortRow = defaultSortRow
-  } = _ref;
-  return rowIds.slice().sort((a, b) => {
-    const cellA = cellsById[cells.getCellId(a, key)];
-    const cellB = cellsById[cells.getCellId(b, key)];
-    return sortRow(cellA?.value, cellB?.value, {
-      key,
-      sortDirection,
-      sortStates: sortStates.sortStates,
-      locale,
-      compare,
-      rowIds: [a, b]
-    });
+    sortDirection,
+    sortStates: sortStates.sortStates,
+    locale,
+    compare,
+    rowIds: [a, b]
   });
-};
+});
 
 /**
  * Sorts table rows based on the sort direction.
  */
-const defaultSortRow = (cellA, cellB, _ref2) => {
-  let {
-    sortDirection,
-    sortStates,
-    locale
-  } = _ref2;
+const defaultSortRow = (cellA, cellB, {
+  sortDirection,
+  sortStates,
+  locale
+}) => {
   if (sortDirection === sortStates.ASC) {
     return compare(cellA, cellB, locale);
   }

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -22,18 +22,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _span, _span2;
-const DataTableSkeleton = _ref => {
-  let {
-    headers,
-    rowCount = 5,
-    columnCount = 5,
-    zebra = false,
-    compact = false,
-    className,
-    showHeader = true,
-    showToolbar = true,
-    ...rest
-  } = _ref;
+const DataTableSkeleton = ({
+  headers,
+  rowCount = 5,
+  columnCount = 5,
+  zebra = false,
+  compact = false,
+  className,
+  showHeader = true,
+  showToolbar = true,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const dataTableSkeletonClasses = cx__default["default"](className, {
     [`${prefix}--skeleton`]: true,