@carbon/react 1.44.0-rc.0 → 1.45.0-rc.0

package/es/components/Accordion/AccordionItem.d.ts

@@ -47,7 +47,7 @@ interface AccordionItemProps {
      * The callback function to run on the `onAnimationEnd`
      * event for the list item.
      */
-    handleAnimationEnd?: AnimationEventHandler<HTMLLIElement>;
+    handleAnimationEnd?: AnimationEventHandler<HTMLElement>;
 }
 interface AccordionToggleProps {
     'aria-controls'?: AriaAttributes['aria-controls'];

package/es/components/Accordion/AccordionItem.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { ChevronRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState, useContext } from 'react';
+import React__default, { useState, useContext, useRef } from 'react';
 import '../Text/index.js';
 import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -37,8 +37,6 @@ function AccordionItem(_ref) {
     ...rest
   } = _ref;
   const [isOpen, setIsOpen] = useState(open);
-  const [prevIsOpen, setPrevIsOpen] = useState(open);
-  const [animation, setAnimation] = useState('');
   const accordionState = useContext(AccordionContext);
   const disabledIsControlled = typeof controlledDisabled === 'boolean';
   const disabled = disabledIsControlled ? controlledDisabled : accordionState.disabled;
@@ -47,23 +45,28 @@ function AccordionItem(_ref) {
   const className = cx({
     [`${prefix}--accordion__item`]: true,
     [`${prefix}--accordion__item--active`]: isOpen,
-    [`${prefix}--accordion__item--${animation}`]: animation,
     [`${prefix}--accordion__item--disabled`]: disabled,
     [customClassName]: !!customClassName
   });
   const Toggle = renderToggle || renderExpando; // remove renderExpando in next major release
 
-  if (open !== prevIsOpen) {
-    setAnimation(isOpen ? 'collapsing' : 'expanding');
-    setIsOpen(open);
-    setPrevIsOpen(open);
-  }
+  const content = useRef(null);
 
   // When the AccordionItem heading is clicked, toggle the open state of the
   // panel
   function onClick(event) {
+    // type guard for ref
+    if (!content.current) {
+      return;
+    }
+    if (isOpen) {
+      // accordion closes
+      content.current.style.maxBlockSize = '';
+    } else {
+      // accordion opens
+      content.current.style.maxBlockSize = content.current.scrollHeight + 15 + 'px';
+    }
     const nextValue = !isOpen;
-    setAnimation(isOpen ? 'collapsing' : 'expanding');
     setIsOpen(nextValue);
     if (onHeadingClick) {
       // TODO: normalize signature, potentially:
@@ -85,13 +88,10 @@ function AccordionItem(_ref) {
     if (handleAnimationEnd) {
       handleAnimationEnd(event);
     }
-    setAnimation('');
   }
   return /*#__PURE__*/React__default.createElement("li", _extends({
     className: className
-  }, rest, {
-    onAnimationEnd: onAnimationEnd
-  }), /*#__PURE__*/React__default.createElement(Toggle, {
+  }, rest), /*#__PURE__*/React__default.createElement(Toggle, {
     disabled: disabled,
     "aria-controls": id,
     "aria-expanded": isOpen,
@@ -105,9 +105,13 @@ function AccordionItem(_ref) {
     as: "div",
     className: `${prefix}--accordion__title`
   }, title)), /*#__PURE__*/React__default.createElement("div", {
+    ref: content,
+    className: `${prefix}--accordion__wrapper`,
+    onTransitionEnd: onAnimationEnd
+  }, /*#__PURE__*/React__default.createElement("div", {
     id: id,
     className: `${prefix}--accordion__content`
-  }, children));
+  }, children)));
 }
 AccordionItem.propTypes = {
   /**

package/es/components/Checkbox/Checkbox.d.ts

@@ -45,6 +45,10 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * Provide the text that is displayed when the Checkbox is in an invalid state
      */
     invalidText?: React.ReactNode;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify whether the Checkbox is currently invalid
      */

package/es/components/Checkbox/Checkbox.js

@@ -33,6 +33,7 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     title = '',
     warn,
     warnText,
+    slug,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -47,11 +48,19 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const wrapperClasses = cx(`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, className, {
     [`${prefix}--checkbox-wrapper--readonly`]: readOnly,
     [`${prefix}--checkbox-wrapper--invalid`]: !readOnly && invalid,
-    [`${prefix}--checkbox-wrapper--warning`]: showWarning
+    [`${prefix}--checkbox-wrapper--warning`]: showWarning,
+    [`${prefix}--checkbox-wrapper--slug`]: slug
   });
   const innerLabelClasses = cx(`${prefix}--checkbox-label-text`, {
     [`${prefix}--visually-hidden`]: hideLabel
   });
+  let normalizedSlug;
+  if (slug && /*#__PURE__*/React__default.isValidElement(slug)) {
+    const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
@@ -97,7 +106,7 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     title: title
   }, /*#__PURE__*/React__default.createElement(Text, {
     className: innerLabelClasses
-  }, labelText)), /*#__PURE__*/React__default.createElement("div", {
+  }, labelText, normalizedSlug)), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--checkbox__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`
@@ -165,6 +174,10 @@ Checkbox.propTypes = {
    * Specify whether the Checkbox is read-only
    */
   readOnly: PropTypes.bool,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify a title for the <label> node for the Checkbox
    */

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -26,6 +26,7 @@ function CheckboxGroup(_ref) {
     readOnly,
     warn,
     warnText,
+    slug,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -40,8 +41,18 @@ function CheckboxGroup(_ref) {
   const fieldsetClasses = cx(`${prefix}--checkbox-group`, className, {
     [`${prefix}--checkbox-group--readonly`]: readOnly,
     [`${prefix}--checkbox-group--invalid`]: !readOnly && invalid,
-    [`${prefix}--checkbox-group--warning`]: showWarning
+    [`${prefix}--checkbox-group--warning`]: showWarning,
+    [`${prefix}--checkbox-group--slug`]: slug
   });
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini',
+      kind: 'default'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("fieldset", _extends({
     className: fieldsetClasses,
     "data-invalid": invalid ? true : undefined,
@@ -51,7 +62,7 @@ function CheckboxGroup(_ref) {
   }, rest), /*#__PURE__*/React__default.createElement("legend", {
     className: `${prefix}--label`,
     id: legendId || rest['aria-labelledby']
-  }, legendText), children, /*#__PURE__*/React__default.createElement("div", {
+  }, legendText, normalizedSlug), children, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--checkbox-group__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`
@@ -97,6 +108,10 @@ CheckboxGroup.propTypes = {
    * Whether the CheckboxGroup should be read-only
    */
   readOnly: PropTypes.bool,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify whether the form group is currently in warning state
    */

package/es/components/ComboBox/ComboBox.d.ts

@@ -137,7 +137,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     size?: ListBoxSize;
     /**
-     * Provide a `Slug` component to be rendered inside the `ComboBox` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `ComboBox` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/ComboBox/ComboBox.js

@@ -575,7 +575,7 @@ ComboBox.propTypes = {
    */
   size: ListBoxSize,
   /**
-   * Provide a `Slug` component to be rendered inside the `ComboBox` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComboBox` component
    */
   slug: PropTypes.node,
   /**

package/es/components/ComboButton/index.js

@@ -20,7 +20,7 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _ChevronDown;
-const spacing = 4; // top and bottom spacing between the button and the menu. in px
+const spacing = 0; // top and bottom spacing between the button and the menu. in px
 const defaultTranslations = {
   'carbon.combo-button.additional-actions': 'Additional actions'
 };

package/es/components/ComposedModal/ModalFooter.d.ts

@@ -1,4 +1,5 @@
 import React, { type ReactNode, type MouseEvent, type Ref } from 'react';
+import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 interface SecondaryButtonProps {
     buttonText: ReactNode;
     onClick(evt: MouseEvent): void;
@@ -70,7 +71,7 @@ export interface ModalFooterProps {
     /**
      * loading status
      */
-    loadingStatus?: string;
+    loadingStatus?: InlineLoadingStatus;
     /**
      * Specify the description for the loading text
      */

package/es/components/DataTable/DataTable.d.ts

@@ -22,6 +22,7 @@ import TableHeader from './TableHeader';
 import TableRow from './TableRow';
 import TableSelectAll from './TableSelectAll';
 import TableSelectRow from './TableSelectRow';
+import TableSlugRow from './TableSlugRow';
 import TableToolbar from './TableToolbar';
 import TableToolbarAction from './TableToolbarAction';
 import TableToolbarContent from './TableToolbarContent';
@@ -302,6 +303,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
     static TableRow: typeof TableRow;
     static TableSelectAll: typeof TableSelectAll;
     static TableSelectRow: typeof TableSelectRow;
+    static TableSlugRow: typeof TableSlugRow;
     static TableToolbar: typeof TableToolbar;
     static TableToolbarAction: typeof TableToolbarAction;
     static TableToolbarContent: typeof TableToolbarContent;

package/es/components/DataTable/DataTable.js

@@ -31,6 +31,7 @@ import TableHeader from './TableHeader.js';
 import TableRow from './TableRow.js';
 import TableSelectAll from './TableSelectAll.js';
 import TableSelectRow from './TableSelectRow.js';
+import TableSlugRow from './TableSlugRow.js';
 import TableToolbar from './TableToolbar.js';
 import TableToolbarAction from './TableToolbarAction.js';
 import TableToolbarContent from './TableToolbarContent.js';
@@ -723,6 +724,7 @@ _defineProperty(DataTable, "TableHeader", void 0);
 _defineProperty(DataTable, "TableRow", void 0);
 _defineProperty(DataTable, "TableSelectAll", void 0);
 _defineProperty(DataTable, "TableSelectRow", void 0);
+_defineProperty(DataTable, "TableSlugRow", void 0);
 _defineProperty(DataTable, "TableToolbar", void 0);
 _defineProperty(DataTable, "TableToolbarAction", void 0);
 _defineProperty(DataTable, "TableToolbarContent", void 0);
@@ -743,6 +745,7 @@ DataTable.TableHeader = TableHeader;
 DataTable.TableRow = TableRow;
 DataTable.TableSelectAll = TableSelectAll;
 DataTable.TableSelectRow = TableSelectRow;
+DataTable.TableSlugRow = TableSlugRow;
 DataTable.TableToolbar = TableToolbar;
 DataTable.TableToolbarAction = TableToolbarAction;
 DataTable.TableToolbarContent = TableToolbarContent;

package/es/components/DataTable/TableExpandRow.js

@@ -28,17 +28,34 @@ const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
+
+  // We need to put the slug before the expansion arrow and all other table cells after the arrow.
+  let rowHasSlug;
+  const slug = React__default.Children.toArray(children).map(child => {
+    if (child.type?.displayName === 'TableSlugRow') {
+      if (child.props.slug) {
+        rowHasSlug = true;
+      }
+      return child;
+    }
+  });
+  const normalizedChildren = React__default.Children.toArray(children).map(child => {
+    if (child.type?.displayName !== 'TableSlugRow') {
+      return child;
+    }
+  });
   const className = cx({
     [`${prefix}--parent-row`]: true,
     [`${prefix}--expandable-row`]: isExpanded,
-    [`${prefix}--data-table--selected`]: isSelected
+    [`${prefix}--data-table--selected`]: isSelected,
+    [`${prefix}--parent-row--slug`]: rowHasSlug
   }, rowClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;
   return /*#__PURE__*/React__default.createElement("tr", _extends({}, rest, {
     ref: ref,
     className: className,
     "data-parent-row": true
-  }), /*#__PURE__*/React__default.createElement(TableCell, {
+  }), slug, /*#__PURE__*/React__default.createElement(TableCell, {
     className: `${prefix}--table-expand`,
     "data-previous-value": previousValue,
     headers: expandHeader
@@ -53,7 +70,7 @@ const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React__default.createElement(ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
-  }))), children);
+  }))), normalizedChildren);
 });
 TableExpandRow.propTypes = {
   /**

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

@@ -4,6 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { ReactNodeLike } from 'prop-types';
 import React, { MouseEventHandler } from 'react';
 import { ReactAttr } from '../../types/common';
 interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement> {
@@ -43,6 +44,10 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
      */
     scope?: string;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify which direction we are currently sorting by, should be one of DESC,
      * NONE, or ASC.

package/es/components/DataTable/TableHeader.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import { ArrowUp, ArrowsVertical } from '@carbon/icons-react';
 import './state/sorting.js';
 import { useId } from '../../internal/useId.js';
@@ -52,11 +52,26 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     scope = defaultScope,
     sortDirection,
     translateWithId: t = translateWithId,
+    slug,
     id,
     ...rest
   } = _ref;
   const prefix = usePrefix();
   const uniqueId = useId('table-sort');
+
+  // Slug is always size `mini`
+  const slugRef = useRef(null);
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini',
+      ref: slugRef
+    });
+  }
+  const headerLabelClassNames = cx({
+    [`${prefix}--table-header-label`]: true,
+    [`${prefix}--table-header-label--slug`]: slug
+  });
   if (!isSortable) {
     return /*#__PURE__*/React__default.createElement("th", _extends({}, rest, {
       id: id,
@@ -65,8 +80,8 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
       colSpan: colSpan,
       ref: ref
     }), children ? /*#__PURE__*/React__default.createElement("div", {
-      className: `${prefix}--table-header-label`
-    }, children) : null);
+      className: headerLabelClassNames
+    }, children, normalizedSlug) : null);
   }
   const className = cx(headerClassName, {
     [`${prefix}--table-sort`]: true,
@@ -80,7 +95,16 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     isSortHeader,
     sortStates
   });
-  const headerClasses = cx(headerClassName, `${prefix}--table-sort__header`);
+  const headerClasses = cx(headerClassName, `${prefix}--table-sort__header`, {
+    [`${prefix}--table-sort__header--slug`]: slug
+  });
+  const handleClick = evt => {
+    if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
+      return;
+    } else if (onClick) {
+      return onClick(evt);
+    }
+  };
   return /*#__PURE__*/React__default.createElement("th", {
     id: id,
     "aria-sort": ariaSort,
@@ -95,12 +119,12 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     type: "button",
     "aria-describedby": uniqueId,
     className: className,
-    onClick: onClick
+    onClick: handleClick
   }, rest), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--table-sort__flex`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--table-header-label`
-  }, children), /*#__PURE__*/React__default.createElement(ArrowUp, {
+  }, children), normalizedSlug, /*#__PURE__*/React__default.createElement(ArrowUp, {
     size: 20,
     className: `${prefix}--table-sort__icon`
   }), /*#__PURE__*/React__default.createElement(ArrowsVertical, {

package/es/components/DataTable/TableSlugRow.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes, { ReactNodeLike } from 'prop-types';
+export interface TableSlugRowProps {
+    /**
+     * The CSS class names of the cell that wraps the underlying input control
+     */
+    className?: string;
+    /**
+     * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+     */
+    slug?: ReactNodeLike;
+}
+declare const TableSlugRow: {
+    ({ className, slug }: TableSlugRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * The CSS class names of the cell that wraps the underlying input control
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+         */
+        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export default TableSlugRow;

package/es/components/DataTable/TableSlugRow.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+const TableSlugRow = _ref => {
+  let {
+    className,
+    slug
+  } = _ref;
+  const prefix = usePrefix();
+  const TableSlugRowClasses = cx({
+    ...(className && {
+      [className]: true
+    }),
+    [`${prefix}--table-column-slug`]: true,
+    [`${prefix}--table-column-slug--active`]: slug
+  });
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini'
+    });
+  }
+  return /*#__PURE__*/React__default.createElement("td", {
+    className: TableSlugRowClasses
+  }, normalizedSlug);
+};
+TableSlugRow.propTypes = {
+  /**
+   * The CSS class names of the cell that wraps the underlying input control
+   */
+  className: PropTypes.string,
+  /**
+   * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+   */
+  slug: PropTypes.node
+};
+
+export { TableSlugRow as default };

package/es/components/DataTable/index.d.ts

@@ -20,10 +20,11 @@ import TableHeader from './TableHeader';
 import TableRow from './TableRow';
 import TableSelectAll from './TableSelectAll';
 import TableSelectRow from './TableSelectRow';
+import TableSlugRow from './TableSlugRow';
 import TableToolbar from './TableToolbar';
 import TableToolbarAction from './TableToolbarAction';
 import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
-export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
+export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
 export default DataTable;

package/es/components/DataTable/index.js

@@ -37,6 +37,8 @@ import TableSelectAll from './TableSelectAll.js';
 export { default as TableSelectAll } from './TableSelectAll.js';
 import TableSelectRow from './TableSelectRow.js';
 export { default as TableSelectRow } from './TableSelectRow.js';
+import TableSlugRow from './TableSlugRow.js';
+export { default as TableSlugRow } from './TableSlugRow.js';
 import TableToolbar from './TableToolbar.js';
 export { default as TableToolbar } from './TableToolbar.js';
 import TableToolbarAction from './TableToolbarAction.js';
@@ -63,6 +65,7 @@ DataTable.TableHeader = TableHeader;
 DataTable.TableRow = TableRow;
 DataTable.TableSelectAll = TableSelectAll;
 DataTable.TableSelectRow = TableSelectRow;
+DataTable.TableSlugRow = TableSlugRow;
 DataTable.TableToolbar = TableToolbar;
 DataTable.TableToolbarAction = TableToolbarAction;
 DataTable.TableToolbarContent = TableToolbarContent;

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

@@ -33,7 +33,7 @@ const compare = function (a, b) {
 
   // if column has React elements, this should sort by the child string if there is one
   if (typeof a === 'object' && typeof b === 'object') {
-    if (typeof a.props.children === 'string' && typeof b.props.children === 'string') {
+    if (typeof a.props?.children === 'string' && typeof b.props?.children === 'string') {
       return compareStrings(a.props.children, b.props.children, locale);
     }
   }

package/es/components/DatePickerInput/DatePickerInput.d.ts

@@ -77,7 +77,7 @@ interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>, Exclude
      */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * Provide a `Slug` component to be rendered inside the `DatePickerInput` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `DatePickerInput` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/DatePickerInput/DatePickerInput.js

@@ -206,7 +206,7 @@ DatePickerInput.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
-   * Provide a `Slug` component to be rendered inside the `DatePickerInput` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `DatePickerInput` component
    */
   slug: PropTypes.node,
   /**

package/es/components/Dropdown/Dropdown.d.ts

@@ -112,7 +112,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      */
     size?: ListBoxSize;
     /**
-     * Provide a `Slug` component to be rendered inside the `Dropdown` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/Dropdown/Dropdown.js

@@ -396,7 +396,7 @@ Dropdown.propTypes = {
    */
   size: ListBoxSize,
   /**
-   * Provide a `Slug` component to be rendered inside the `Dropdown` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
    */
   slug: PropTypes.node,
   /**

package/es/components/FileUploader/FileUploader.js

@@ -106,11 +106,12 @@ class FileUploader extends React__default.Component {
     return /*#__PURE__*/React__default.createElement("div", _extends({
       className: classes
     }, other), !labelTitle ? null : /*#__PURE__*/React__default.createElement(Text, {
-      as: "p",
+      as: "h3",
       className: getHelperLabelClasses(`${prefix}--file--label`)
     }, labelTitle), /*#__PURE__*/React__default.createElement(Text, {
       as: "p",
-      className: getHelperLabelClasses(`${prefix}--label-description`)
+      className: getHelperLabelClasses(`${prefix}--label-description`),
+      id: "description"
     }, labelDescription), /*#__PURE__*/React__default.createElement(FileUploaderButton, {
       innerRef: this.uploaderButton,
       disabled: disabled,
@@ -121,7 +122,8 @@ class FileUploader extends React__default.Component {
       disableLabelChanges: true,
       accept: accept,
       name: name,
-      size: size
+      size: size,
+      "aria-describedby": "description"
     }), /*#__PURE__*/React__default.createElement("div", {
       className: `${prefix}--file-container`
     }, this.state.filenames.length === 0 ? null : this.state.filenames.map((name, index) => /*#__PURE__*/React__default.createElement("span", _extends({

package/es/components/Grid/Column.js

@@ -102,6 +102,11 @@ Column.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   sm: spanPropType,
+  /**
+   * Specify constant column span, start, or end values that will not change
+   * based on breakpoint
+   */
+  span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
   /**
    * Specify column span for the `xlg` breakpoint (Default breakpoint up to
    * 1584px) This breakpoint supports 16 columns by default.
@@ -311,8 +316,13 @@ function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
  */
 function getClassNameForSpan(value, prefix) {
   const classNames = [];
-  if (typeof value === 'number' || typeof value === 'string') {
+  if (typeof value === 'number') {
     classNames.push(`${prefix}--col-span-${value}`);
+  }
+  // If value is a string, the user has specified a percent
+  // they'd like this column to span.
+  else if (typeof value === 'string') {
+    classNames.push(`${prefix}--col-span-${value.slice(0, -1)}`);
   } else if (typeof value === 'object') {
     const {
       span,