@carbon/react 1.42.1 → 1.44.0-rc.0

package/es/components/UIShell/SwitcherItem.js

@@ -6,17 +6,17 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import Link from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 
-const SwitcherItem = /*#__PURE__*/React__default.forwardRef(function SwitcherItem(_ref, ref) {
-  let {
+const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwardRef) {
+  const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     className: customClassName,
@@ -28,10 +28,10 @@ const SwitcherItem = /*#__PURE__*/React__default.forwardRef(function SwitcherIte
     handleSwitcherItemFocus,
     onKeyDown = () => {},
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix();
-  const className = cx(`${prefix}--switcher__item`, {
-    [customClassName]: !!customClassName
+  const classNames = cx(`${prefix}--switcher__item`, {
+    [customClassName || '']: !!customClassName
   });
   const accessibilityLabel = {
     'aria-label': ariaLabel,
@@ -44,36 +44,33 @@ const SwitcherItem = /*#__PURE__*/React__default.forwardRef(function SwitcherIte
     if (match(evt, ArrowDown)) {
       evt.preventDefault();
       handleSwitcherItemFocus?.({
-        currentIndex: index,
+        currentIndex: index || -1,
         direction: 1
       });
     }
     if (match(evt, ArrowUp)) {
       evt.preventDefault();
       handleSwitcherItemFocus?.({
-        currentIndex: index,
+        currentIndex: index || -1,
         direction: -1
       });
     }
   }
   return /*#__PURE__*/React__default.createElement("li", {
-    className: className
+    className: classNames
   }, /*#__PURE__*/React__default.createElement(Link, _extends({
     onKeyDown: evt => {
       setTabFocus(evt);
       onKeyDown(evt);
-    }
+    },
+    ref: forwardRef
   }, rest, {
-    ref: ref,
     className: linkClassName,
     tabIndex: tabIndex
   }, accessibilityLabel), children));
 });
 SwitcherItem.displayName = 'SwitcherItem';
 SwitcherItem.propTypes = {
-  /**
-   * Required props for accessibility label on the underlying menuitem
-   */
   ...AriaLabelPropType,
   /**
    * Specify the text content for the link
@@ -100,6 +97,5 @@ SwitcherItem.propTypes = {
    */
   tabIndex: PropTypes.number
 };
-var SwitcherItem$1 = SwitcherItem;
 
-export { SwitcherItem$1 as default };
+export { SwitcherItem as default };

package/es/index.d.ts

@@ -114,6 +114,7 @@ export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/Overflow
 export { PageSelector as unstable_PageSelector, Pagination as unstable_Pagination, } from './components/Pagination/experimental';
 export * from './components/Popover';
 export * from './components/ProgressBar';
+export { Slug as unstable__Slug, SlugContent as unstable__SlugContent, SlugActions as unstable__SlugActions, } from './components/Slug';
 export * from './components/Stack';
 export * from './components/Tooltip';
 export { Text as unstable_Text, TextDirection as unstable_TextDirection, } from './components/Text';

package/es/index.js

@@ -133,6 +133,7 @@ export { Layer, useLayer } from './components/Layer/index.js';
 export { Layout as unstable_Layout } from './components/Layout/index.js';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2/index.js';
 export { Popover, PopoverContent } from './components/Popover/index.js';
+export { Slug as unstable__Slug, SlugActions as unstable__SlugActions, SlugContent as unstable__SlugContent } from './components/Slug/index.js';
 export { HStack, VStack } from './components/Stack/index.js';
 export { DefinitionTooltip } from './components/Tooltip/DefinitionTooltip.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';

package/es/prop-types/tools/getDisplayName.js

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+
+const cachedDisplayNames = new WeakMap();
+
+/**
+ * `getDisplayName` is a utility function for getting a name from a given
+ * component type. It supports names from React elements, Stateless Functional
+ * Components, and Class-based Components
+ */
+const getDisplayName = type => {
+  if (typeof type === 'string') {
+    return type;
+  }
+  if (cachedDisplayNames.has(type)) {
+    return cachedDisplayNames.get(type);
+  }
+  let displayName;
+  if (typeof type.displayName === 'string') {
+    displayName = type.displayName;
+  }
+  if (!displayName) {
+    displayName = type.name || 'Unknown';
+  }
+  cachedDisplayNames.set(type, displayName);
+  return displayName;
+};
+var getDisplayName$1 = getDisplayName;
+
+export { getDisplayName$1 as default };

package/lib/components/Breadcrumb/BreadcrumbItem.js

@@ -79,8 +79,7 @@ const BreadcrumbItem = /*#__PURE__*/React__default["default"].forwardRef(functio
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 BreadcrumbItem.propTypes = {
-  // @ts-expect-error - v12 TODO: BREAKING: This should match AriaAttributes['aria-current']
-  'aria-current': PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].bool]),
+  'aria-current': PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].oneOf(['false', 'true', 'page', 'step', 'location', 'date', 'time'])]),
   /**
    * Pass in content that will be inside of the BreadcrumbItem
    */

package/lib/components/ComboBox/ComboBox.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Downshift from 'downshift';
+import { ReactNodeLike } from 'prop-types';
 import { type ComponentProps, type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithoutRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 import { ListBoxSize } from '../ListBox';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
@@ -135,6 +136,10 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
      */
     size?: ListBoxSize;
+    /**
+     * Provide a `Slug` component to be rendered inside the `ComboBox` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Provide text to be used in a `<label>` element that is tied to the
      * combobox via ARIA attributes.

package/lib/components/ComboBox/ComboBox.js

@@ -123,6 +123,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     warn,
     warnText,
     allowCustomValue = false,
+    slug,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -254,7 +255,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
   const wrapperClasses = cx__default["default"](`${prefix}--list-box__wrapper`, [containerClassName, {
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
-    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused
+    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
+    [`${prefix}--list-box__wrapper--slug`]: slug
   }]);
   const inputClasses = cx__default["default"](`${prefix}--text-input`, {
     [`${prefix}--text-input--empty`]: !inputValue,
@@ -263,6 +265,14 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement(Downshift__default["default"], _rollupPluginBabelHelpers["extends"]({}, downshiftProps, {
     onChange: handleOnChange,
     onInputValueChange: handleOnInputValueChange,
@@ -352,6 +362,18 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         if (match.match(event, keys.End) && event.code !== 'Numpad1') {
           event.target.setSelectionRange(event.target.value.length, event.target.value.length);
         }
+        if (event.altKey && event.key == 'ArrowDown') {
+          event.preventDownshiftDefault = true;
+          if (!isOpen) {
+            toggleMenu();
+          }
+        }
+        if (event.altKey && event.key == 'ArrowUp') {
+          event.preventDownshiftDefault = true;
+          if (isOpen) {
+            toggleMenu();
+          }
+        }
       }
     });
     const handleFocus = evt => {
@@ -413,7 +435,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
       isOpen: isOpen,
       translateWithId: translateWithId
-    }))), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({
+    }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({
       'aria-label': deprecatedAriaLabel || ariaLabel
     }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
       const isObject = item !== null && typeof item === 'object';
@@ -563,6 +585,10 @@ ComboBox.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSize,
+  /**
+   * Provide a `Slug` component to be rendered inside the `ComboBox` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * combobox via ARIA attributes.

package/lib/components/ComboButton/index.js

@@ -78,7 +78,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     }
   }
   function handleOpen() {
-    menuRef.current.style.width = `${width}px`;
+    menuRef.current.style.inlineSize = `${width}px`;
   }
   const containerClasses = cx__default["default"](`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
     [`${prefix}--combo-button__container--open`]: open
@@ -110,6 +110,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     ref: menuRef,
     id: id,
     label: t('carbon.combo-button.additional-actions'),
+    mode: "basic",
     size: size,
     open: open,
     onClose: handleClose,

package/lib/components/ComposedModal/ComposedModal.d.ts

@@ -4,7 +4,7 @@ export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     /**
      * Provide whether the modal content has a form element.
-     * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+     * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.
      */
     hasForm?: boolean;
     /**
@@ -15,11 +15,11 @@ export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
 export declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
 export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Specify the aria-label for bx--modal-container
+     * Specify the aria-label for cds--modal-container
      */
     'aria-label'?: string;
     /**
-     * Specify the aria-labelledby for bx--modal-container
+     * Specify the aria-labelledby for cds--modal-container
      */
     'aria-labelledby'?: string;
     /**

package/lib/components/ComposedModal/ComposedModal.js

@@ -66,7 +66,7 @@ ModalBody.propTypes = {
   className: PropTypes__default["default"].string,
   /**
    * Provide whether the modal content has a form element.
-   * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+   * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.
    */
   hasForm: PropTypes__default["default"].bool,
   /**
@@ -241,11 +241,11 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
 });
 ComposedModal.propTypes = {
   /**
-   * Specify the aria-label for bx--modal-container
+   * Specify the aria-label for cds--modal-container
    */
   ['aria-label']: PropTypes__default["default"].string,
   /**
-   * Specify the aria-labelledby for bx--modal-container
+   * Specify the aria-labelledby for cds--modal-container
    */
   ['aria-labelledby']: PropTypes__default["default"].string,
   /**

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

@@ -5,6 +5,7 @@ interface SecondaryButtonProps {
 }
 export interface SecondaryButtonSetProps {
     closeModal(evt: MouseEvent): void;
+    disabled?: boolean;
     onRequestClose(evt: MouseEvent): void;
     secondaryButtonText?: string;
     secondaryButtons?: [SecondaryButtonProps, SecondaryButtonProps];
@@ -66,6 +67,23 @@ export interface ModalFooterProps {
      * Specify a custom className to be applied to the secondary button
      */
     secondaryClassName?: string;
+    /**
+     * loading status
+     */
+    loadingStatus?: string;
+    /**
+     * Specify the description for the loading text
+     */
+    loadingDescription?: string;
+    /**
+     * Specify the description for the loading text
+     */
+    loadingIconDescription?: string;
+    /**
+     * Provide an optional handler to be invoked when loading is
+     * successful
+     */
+    onLoadingSuccess?(): void;
 }
 export declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLElement>>;
 export {};

package/lib/components/ComposedModal/ModalFooter.js

@@ -18,6 +18,7 @@ var ButtonSet = require('../ButtonSet/ButtonSet.js');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
+var InlineLoading = require('../InlineLoading/InlineLoading.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +32,8 @@ function SecondaryButtonSet(_ref) {
     secondaryButtonText,
     secondaryClassName,
     closeModal,
-    onRequestClose
+    onRequestClose,
+    disabled
   } = _ref;
   function handleRequestClose(evt) {
     closeModal(evt);
@@ -53,6 +55,7 @@ function SecondaryButtonSet(_ref) {
   }
   if (secondaryButtonText) {
     return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+      disabled: disabled,
       className: secondaryClassName,
       onClick: handleRequestClose,
       kind: "secondary"
@@ -62,6 +65,7 @@ function SecondaryButtonSet(_ref) {
 }
 SecondaryButtonSet.propTypes = {
   closeModal: PropTypes__default["default"].func,
+  disabled: PropTypes__default["default"].bool,
   onRequestClose: PropTypes__default["default"].func,
   secondaryButtonText: PropTypes__default["default"].string,
   secondaryButtons: (props, propName, componentName) => {
@@ -96,32 +100,43 @@ const ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function M
     secondaryButtonText,
     secondaryButtons,
     secondaryClassName,
+    loadingStatus = 'inactive',
+    loadingDescription,
+    loadingIconDescription,
+    onLoadingSuccess = noopFn.noopFn,
     ...rest
   } = _ref3;
   const prefix = usePrefix.usePrefix();
   const footerClass = cx__default["default"](`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
+  const primaryButtonClass = cx__default["default"](primaryClassName, loadingStatus !== 'inactive' ? `${prefix}--btn--loading` : null);
+  const loadingActive = loadingStatus !== 'inactive';
   const secondaryButtonProps = {
     closeModal,
     secondaryButtons,
     secondaryButtonText,
     secondaryClassName,
-    onRequestClose
+    onRequestClose,
+    disabled: loadingActive
   };
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
+    className: footerClass
+  }, rest, {
     // @ts-expect-error: Invalid derived types, will be fine once explicit types are added
-    React__default["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
-      className: footerClass
-    }, rest, {
-      ref: ref
-    }), /*#__PURE__*/React__default["default"].createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-      onClick: onRequestSubmit,
-      className: primaryClassName,
-      disabled: primaryButtonDisabled,
-      kind: danger ? 'danger' : 'primary',
-      ref: inputref
-    }, primaryButtonText), children)
-  );
+    ref: ref,
+    "aria-busy": loadingActive
+  }), /*#__PURE__*/React__default["default"].createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    onClick: onRequestSubmit,
+    className: primaryButtonClass,
+    disabled: loadingActive || primaryButtonDisabled,
+    kind: danger ? 'danger' : 'primary',
+    ref: inputref
+  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React__default["default"].createElement(InlineLoading["default"], {
+    status: loadingStatus,
+    description: loadingDescription,
+    iconDescription: loadingIconDescription,
+    className: `${prefix}--inline-loading--btn`,
+    onSuccess: onLoadingSuccess
+  })), children);
 });
 ModalFooter.propTypes = {
   /**
@@ -148,6 +163,23 @@ ModalFooter.propTypes = {
   inputref: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
     current: PropTypes__default["default"].any
   })]),
+  /**
+   * Specify the description for the loading text
+   */
+  loadingDescription: PropTypes__default["default"].string,
+  /**
+   * Specify the description for the loading text
+   */
+  loadingIconDescription: PropTypes__default["default"].string,
+  /**
+   * loading status
+   */
+  loadingStatus: PropTypes__default["default"].oneOf(['inactive', 'active', 'finished', 'error']),
+  /**
+   * Provide an optional handler to be invoked when loading is
+   * successful
+   */
+  onLoadingSuccess: PropTypes__default["default"].func,
   /**
    * Specify an optional function for when the modal is requesting to be
    * closed

package/lib/components/ContextMenu/useContextMenu.js

@@ -44,7 +44,8 @@ function useContextMenu() {
     open,
     x: position[0],
     y: position[1],
-    onClose
+    onClose,
+    mode: 'full'
   };
 }
 

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -73,7 +73,7 @@ const DataTableSkeleton = _ref => {
   }, rest), /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", null, columnsArray.map(i => /*#__PURE__*/React__default["default"].createElement("th", {
     key: i
   }, headers ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "bx--table-header-label"
+    className: "cds--table-header-label"
   }, headers[i]?.header) : _span2 || (_span2 = /*#__PURE__*/React__default["default"].createElement("span", null)))))), /*#__PURE__*/React__default["default"].createElement("tbody", null, rows)));
 };
 DataTableSkeleton.propTypes = {

package/lib/components/DatePickerInput/DatePickerInput.d.ts

@@ -76,6 +76,10 @@ interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>, Exclude
      * Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Provide a `Slug` component to be rendered inside the `DatePickerInput` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify the type of the `<input>`
      */

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -42,6 +42,7 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
     pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}',
     placeholder,
     size = 'md',
+    slug,
     type = 'text',
     warn,
     warnText,
@@ -70,7 +71,8 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
   };
   const wrapperClasses = cx__default["default"](`${prefix}--date-picker-input__wrapper`, {
     [`${prefix}--date-picker-input__wrapper--invalid`]: invalid,
-    [`${prefix}--date-picker-input__wrapper--warn`]: warn
+    [`${prefix}--date-picker-input__wrapper--warn`]: warn,
+    [`${prefix}--date-picker-input__wrapper--slug`]: slug
   });
   const labelClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
@@ -103,6 +105,14 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
     inputProps['data-invalid'] = true;
   }
   const input = /*#__PURE__*/React__default["default"].createElement("input", inputProps);
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: containerClasses
   }, labelText && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
@@ -111,7 +121,7 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
     className: labelClasses
   }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
-  }, /*#__PURE__*/React__default["default"].createElement("span", null, input, isFluid && /*#__PURE__*/React__default["default"].createElement(DatePickerIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, input, normalizedSlug, isFluid && /*#__PURE__*/React__default["default"].createElement(DatePickerIcon, {
     datePickerType: datePickerType
   }), /*#__PURE__*/React__default["default"].createElement(DatePickerIcon, {
     datePickerType: datePickerType,
@@ -205,6 +215,10 @@ DatePickerInput.propTypes = {
    * Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  /**
+   * Provide a `Slug` component to be rendered inside the `DatePickerInput` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Specify the type of the `<input>`
    */

package/lib/components/Dropdown/Dropdown.d.ts

@@ -6,6 +6,7 @@
  */
 import React, { ReactNode } from 'react';
 import { UseSelectProps } from 'downshift';
+import { ReactNodeLike } from 'prop-types';
 import { ListBoxSize, ListBoxType } from '../ListBox';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange';
@@ -110,6 +111,10 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
      */
     size?: ListBoxSize;
+    /**
+     * Provide a `Slug` component to be rendered inside the `Dropdown` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Provide the title text that will be read by a screen reader when
      * visiting this control

package/lib/components/Dropdown/Dropdown.js

@@ -79,6 +79,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     selectedItem: controlledSelectedItem,
     downshiftProps,
     readOnly,
+    slug,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -169,7 +170,8 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
-    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused && !isOpen
+    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused && !isOpen,
+    [`${prefix}--list-box__wrapper--slug`]: slug
   });
   const helperId = !helperText ? undefined : `dropdown-helper-text-${dropdownInstanceId}`;
 
@@ -233,6 +235,14 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     }
   };
   const menuProps = getMenuProps();
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -271,12 +281,15 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen && items.map((item, index$1) => {
+  })), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen && items.map((item, index$1) => {
     const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,
       index: index$1
     });
+    if (item !== null && typeof item === 'object' && Object.prototype.hasOwnProperty.call(item, 'id')) {
+      itemProps.id = item['id'];
+    }
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
     return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
@@ -304,7 +317,7 @@ Dropdown.propTypes = {
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
   /**
-   * Provide a custom className to be applied on the bx--dropdown node
+   * Provide a custom className to be applied on the cds--dropdown node
    */
   className: PropTypes__default["default"].string,
   /**
@@ -392,6 +405,10 @@ Dropdown.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSize,
+  /**
+   * Provide a `Slug` component to be rendered inside the `Dropdown` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Provide the title text that will be read by a screen reader when
    * visiting this control

package/lib/components/InlineLoading/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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 InlineLoading = require('./InlineLoading.js');
+
+
+
+exports.InlineLoading = InlineLoading["default"];
+exports["default"] = InlineLoading["default"];

package/lib/components/Link/Link.d.ts

@@ -6,6 +6,11 @@
  */
 import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Provide a custom element or component to render the top-level node for the
+     * component.
+     */
+    as?: string | undefined;
     /**
      * @description Indicates the element that represents the
      *   current item within a container or set of related