@carbon/react 1.44.0 → 1.45.0

package/es/index.js

@@ -54,6 +54,7 @@ export { ColumnHang } from './components/Grid/ColumnHang.js';
 export { GridSettings } from './components/Grid/GridContext.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
 export { IdPrefix } from './components/IdPrefix/index.js';
+export { default as InlineLoading } from './components/InlineLoading/InlineLoading.js';
 export { default as Link } from './components/Link/Link.js';
 export { default as ListItem } from './components/ListItem/ListItem.js';
 export { default as Loading } from './components/Loading/Loading.js';
@@ -157,7 +158,6 @@ export { default as useContextMenu } from './components/ContextMenu/useContextMe
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary.js';
-export { default as InlineLoading } from './components/InlineLoading/InlineLoading.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
 export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
@@ -197,6 +197,7 @@ export { default as TableHeader } from './components/DataTable/TableHeader.js';
 export { default as TableRow } from './components/DataTable/TableRow.js';
 export { default as TableSelectAll } from './components/DataTable/TableSelectAll.js';
 export { default as TableSelectRow } from './components/DataTable/TableSelectRow.js';
+export { default as TableSlugRow } from './components/DataTable/TableSlugRow.js';
 export { default as TableToolbar } from './components/DataTable/TableToolbar.js';
 export { default as TableToolbarAction } from './components/DataTable/TableToolbarAction.js';
 export { default as TableToolbarContent } from './components/DataTable/TableToolbarContent.js';

package/es/internal/useAnnouncer.js

@@ -6,9 +6,10 @@
  */
 
 function useAnnouncer(textCount, maxCount) {
+  let entityName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'characters';
   const lastTen = maxCount - 10;
   if (textCount >= lastTen) {
-    return `${maxCount - textCount} characters left.`;
+    return `${maxCount - textCount} ${entityName} left.`;
   }
 }
 

package/es/internal/useNoInteractiveChildren.js

@@ -74,7 +74,7 @@ function getRoleContent(node) {
  * @see https://github.com/w3c/aria-practices/blob/0553bb51588ffa517506e2a1b2ca1422ed438c5f/examples/js/utils.js#L68
  */
 function isFocusable(element) {
-  if (element.tabIndex < 0) {
+  if (element.tabIndex === undefined || element.tabIndex < 0) {
     return false;
   }
   if (element.disabled) {
@@ -85,12 +85,8 @@ function isFocusable(element) {
       return !!element.href && element.rel !== 'ignore';
     case 'INPUT':
       return element.type !== 'hidden';
-    case 'BUTTON':
-    case 'SELECT':
-    case 'TEXTAREA':
-      return true;
     default:
-      return false;
+      return true;
   }
 }
 

package/lib/components/Checkbox/Checkbox.d.ts

@@ -46,7 +46,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      */
     invalidText?: React.ReactNode;
     /**
-     * Provide a `Slug` component to be rendered inside the `Checkbox` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
      */
     slug?: ReactNodeLike;
     /**

package/lib/components/Checkbox/Checkbox.js

@@ -185,7 +185,7 @@ Checkbox.propTypes = {
    */
   readOnly: PropTypes__default["default"].bool,
   /**
-   * Provide a `Slug` component to be rendered inside the `Checkbox` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
    */
   slug: PropTypes__default["default"].node,
   /**

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -57,7 +57,7 @@ function CheckboxGroup(_ref) {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini',
       kind: 'default'
@@ -119,7 +119,7 @@ CheckboxGroup.propTypes = {
    */
   readOnly: PropTypes__default["default"].bool,
   /**
-   * Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
    */
   slug: PropTypes__default["default"].node,
   /**

package/lib/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/lib/components/ComboBox/ComboBox.js

@@ -268,7 +268,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -586,7 +586,7 @@ ComboBox.propTypes = {
    */
   size: ListBoxPropTypes.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__default["default"].node,
   /**

package/lib/components/ComboButton/index.js

@@ -30,7 +30,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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/lib/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/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -140,7 +140,7 @@ class ContentSwitcher extends React__default["default"].Component {
       className: classes,
       role: "tablist",
       onChange: undefined
-    }), children && React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
+    }), children && React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
       index,
       onClick: events.composeEventHandlers([this.handleChildChange, child.props.onClick]),
       onKeyDown: this.handleChildChange,

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

@@ -35,6 +35,7 @@ var TableHeader = require('./TableHeader.js');
 var TableRow = require('./TableRow.js');
 var TableSelectAll = require('./TableSelectAll.js');
 var TableSelectRow = require('./TableSelectRow.js');
+var TableSlugRow = require('./TableSlugRow.js');
 var TableToolbar = require('./TableToolbar.js');
 var TableToolbarAction = require('./TableToolbarAction.js');
 var TableToolbarContent = require('./TableToolbarContent.js');
@@ -733,6 +734,7 @@ _rollupPluginBabelHelpers.defineProperty(DataTable, "TableHeader", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableRow", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableSelectAll", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableSelectRow", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableSlugRow", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbar", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbarAction", void 0);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbarContent", void 0);
@@ -753,6 +755,7 @@ DataTable.TableHeader = TableHeader["default"];
 DataTable.TableRow = TableRow["default"];
 DataTable.TableSelectAll = TableSelectAll["default"];
 DataTable.TableSelectRow = TableSelectRow["default"];
+DataTable.TableSlugRow = TableSlugRow["default"];
 DataTable.TableToolbar = TableToolbar["default"];
 DataTable.TableToolbarAction = TableToolbarAction["default"];
 DataTable.TableToolbarContent = TableToolbarContent["default"];

package/lib/components/DataTable/TableExpandRow.js

@@ -38,17 +38,34 @@ const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef((_ref,
     ...rest
   } = _ref;
   const prefix = usePrefix.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["default"].Children.toArray(children).map(child => {
+    if (child.type?.displayName === 'TableSlugRow') {
+      if (child.props.slug) {
+        rowHasSlug = true;
+      }
+      return child;
+    }
+  });
+  const normalizedChildren = React__default["default"].Children.toArray(children).map(child => {
+    if (child.type?.displayName !== 'TableSlugRow') {
+      return child;
+    }
+  });
   const className = cx__default["default"]({
     [`${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["default"].createElement("tr", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
     className: className,
     "data-parent-row": true
-  }), /*#__PURE__*/React__default["default"].createElement(TableCell["default"], {
+  }), slug, /*#__PURE__*/React__default["default"].createElement(TableCell["default"], {
     className: `${prefix}--table-expand`,
     "data-previous-value": previousValue,
     headers: expandHeader
@@ -63,7 +80,7 @@ const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef((_ref,
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
-  }))), children);
+  }))), normalizedChildren);
 });
 TableExpandRow.propTypes = {
   /**

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

@@ -62,11 +62,26 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     scope = defaultScope,
     sortDirection,
     translateWithId: t = translateWithId,
+    slug,
     id,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const uniqueId = useId.useId('table-sort');
+
+  // Slug is always size `mini`
+  const slugRef = React.useRef(null);
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini',
+      ref: slugRef
+    });
+  }
+  const headerLabelClassNames = cx__default["default"]({
+    [`${prefix}--table-header-label`]: true,
+    [`${prefix}--table-header-label--slug`]: slug
+  });
   if (!isSortable) {
     return /*#__PURE__*/React__default["default"].createElement("th", _rollupPluginBabelHelpers["extends"]({}, rest, {
       id: id,
@@ -75,8 +90,8 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
       colSpan: colSpan,
       ref: ref
     }), children ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${prefix}--table-header-label`
-    }, children) : null);
+      className: headerLabelClassNames
+    }, children, normalizedSlug) : null);
   }
   const className = cx__default["default"](headerClassName, {
     [`${prefix}--table-sort`]: true,
@@ -90,7 +105,16 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     isSortHeader,
     sortStates: sortStates.sortStates
   });
-  const headerClasses = cx__default["default"](headerClassName, `${prefix}--table-sort__header`);
+  const headerClasses = cx__default["default"](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["default"].createElement("th", {
     id: id,
     "aria-sort": ariaSort,
@@ -105,12 +129,12 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     type: "button",
     "aria-describedby": uniqueId,
     className: className,
-    onClick: onClick
+    onClick: handleClick
   }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--table-sort__flex`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--table-header-label`
-  }, children), /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowUp, {
+  }, children), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowUp, {
     size: 20,
     className: `${prefix}--table-sort__icon`
   }), /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowsVertical, {

package/lib/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/lib/components/DataTable/TableSlugRow.js

@@ -0,0 +1,59 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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 prefix = usePrefix.usePrefix();
+  const TableSlugRowClasses = cx__default["default"]({
+    ...(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["default"].cloneElement(slug, {
+      size: 'mini'
+    });
+  }
+  return /*#__PURE__*/React__default["default"].createElement("td", {
+    className: TableSlugRowClasses
+  }, normalizedSlug);
+};
+TableSlugRow.propTypes = {
+  /**
+   * The CSS class names of the cell that wraps the underlying input control
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+   */
+  slug: PropTypes__default["default"].node
+};
+
+exports["default"] = TableSlugRow;

package/lib/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/lib/components/DataTable/index.js

@@ -25,6 +25,7 @@ var TableHeader = require('./TableHeader.js');
 var TableRow = require('./TableRow.js');
 var TableSelectAll = require('./TableSelectAll.js');
 var TableSelectRow = require('./TableSelectRow.js');
+var TableSlugRow = require('./TableSlugRow.js');
 var TableToolbar = require('./TableToolbar.js');
 var TableToolbarAction = require('./TableToolbarAction.js');
 var TableToolbarContent = require('./TableToolbarContent.js');
@@ -46,6 +47,7 @@ DataTable["default"].TableHeader = TableHeader["default"];
 DataTable["default"].TableRow = TableRow["default"];
 DataTable["default"].TableSelectAll = TableSelectAll["default"];
 DataTable["default"].TableSelectRow = TableSelectRow["default"];
+DataTable["default"].TableSlugRow = TableSlugRow["default"];
 DataTable["default"].TableToolbar = TableToolbar["default"];
 DataTable["default"].TableToolbarAction = TableToolbarAction["default"];
 DataTable["default"].TableToolbarContent = TableToolbarContent["default"];
@@ -69,6 +71,7 @@ exports.TableHeader = TableHeader["default"];
 exports.TableRow = TableRow["default"];
 exports.TableSelectAll = TableSelectAll["default"];
 exports.TableSelectRow = TableSelectRow["default"];
+exports.TableSlugRow = TableSlugRow["default"];
 exports.TableToolbar = TableToolbar["default"];
 exports.TableToolbarAction = TableToolbarAction["default"];
 exports.TableToolbarContent = TableToolbarContent["default"];

package/lib/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/lib/components/DatePickerInput/DatePickerInput.js

@@ -108,7 +108,7 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -216,7 +216,7 @@ DatePickerInput.propTypes = {
    */
   size: PropTypes__default["default"].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__default["default"].node,
   /**

package/lib/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/lib/components/Dropdown/Dropdown.js

@@ -238,7 +238,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -406,7 +406,7 @@ Dropdown.propTypes = {
    */
   size: ListBoxPropTypes.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__default["default"].node,
   /**

package/lib/components/InlineLoading/InlineLoading.d.ts

@@ -0,0 +1,68 @@
+/**
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+export declare const InlineLoadingStatuses: readonly ["inactive", "active", "finished", "error"];
+export type InlineLoadingStatus = (typeof InlineLoadingStatuses)[number];
+export interface InlineLoadingProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'> {
+    /**
+     * Specify a custom className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify the description for the inline loading text
+     */
+    description?: React.ReactNode;
+    /**
+     * Specify the description for the inline loading text
+     */
+    iconDescription?: string;
+    /**
+     * Provide an optional handler to be invoked when <InlineLoading> is
+     * successful
+     */
+    onSuccess?: () => void;
+    /**
+     * Specify the loading status
+     */
+    status?: InlineLoadingStatus;
+    /**
+     * Provide a delay for the `setTimeout` for success
+     */
+    successDelay?: number;
+}
+declare const InlineLoading: {
+    ({ className, status, iconDescription, description, onSuccess, successDelay, ...rest }: InlineLoadingProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify a custom className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the description for the inline loading text
+         */
+        description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify the description for the inline loading text
+         */
+        iconDescription: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional handler to be invoked when <InlineLoading> is
+         * successful
+         */
+        onSuccess: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify the loading status
+         */
+        status: PropTypes.Requireable<string>;
+        /**
+         * Provide a delay for the `setTimeout` for success
+         */
+        successDelay: PropTypes.Requireable<number>;
+    };
+};
+export default InlineLoading;

package/lib/components/InlineLoading/InlineLoading.js

@@ -23,7 +23,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function InlineLoading(_ref) {
+const InlineLoading = _ref => {
   let {
     className,
     status = 'active',
@@ -31,7 +31,7 @@ function InlineLoading(_ref) {
     description,
     onSuccess,
     successDelay = 1500,
-    ...other
+    ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const loadingClasses = cx__default["default"](`${prefix}--inline-loading`, className);
@@ -74,10 +74,10 @@ function InlineLoading(_ref) {
   }, loading);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: loadingClasses
-  }, other, {
+  }, rest, {
     "aria-live": 'assertive' 
   }), loadingAnimation, description && loadingText);
-}
+};
 InlineLoading.propTypes = {
   /**
    * Specify a custom className to be applied to the container node

package/lib/components/InlineLoading/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 InlineLoading from './InlineLoading';
+export default InlineLoading;
+export { InlineLoading };

package/lib/components/Layer/LayerContext.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 React from 'react';
+export declare const LayerContext: React.Context<0 | 1 | 2>;