@carbon/react 1.70.0-rc.0 → 1.71.0-rc.0

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -173,7 +173,7 @@ _rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "propTypes", {
    */
   selectedIndex: PropTypes__default["default"].number,
   /**
-   * Choose whether or not to automatically change selection on focus
+   * Choose whether or not to automatically change selection on focus when left/right arrow pressed. Defaults to 'automatic'
    */
   selectionMode: PropTypes__default["default"].oneOf(['automatic', 'manual']),
   /**

package/lib/components/Copy/Copy.d.ts

@@ -6,11 +6,14 @@
  */
 import PropTypes from 'prop-types';
 import React, { AnimationEventHandler, MouseEventHandler, PropsWithChildren } from 'react';
+export type DeprecatedCopyAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+export type NewCopyAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+export type CopyAlignment = DeprecatedCopyAlignment | NewCopyAlignment;
 interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Specify how the trigger should align with the tooltip
      */
-    align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    align?: CopyAlignment;
     /**
      * **Experimental**: Will attempt to automatically align the tooltip
      */
@@ -45,7 +48,7 @@ declare namespace Copy {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string>;
+        align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip
          */

package/lib/components/Copy/Copy.js

@@ -18,6 +18,7 @@ var events = require('../../tools/events.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var index = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
+var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,6 +27,19 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    'top-left': 'top-start',
+    'top-right': 'top-end',
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end',
+    'left-bottom': 'left-end',
+    'left-top': 'left-start',
+    'right-bottom': 'right-end',
+    'right-top': 'right-start'
+  };
+  return mapping[deprecatedValue];
+};
 function Copy(_ref) {
   let {
     align = 'bottom',
@@ -77,7 +91,32 @@ Copy.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  align: deprecateValuesWithin["default"](PropTypes__default["default"].oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  //allowed prop values
+  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+  //optional mapper function
+  propMappingFunction),
   /**
    * **Experimental**: Will attempt to automatically align the tooltip
    */

package/lib/components/CopyButton/CopyButton.d.ts

@@ -7,11 +7,14 @@
 import PropTypes from 'prop-types';
 import { MouseEventHandler } from 'react';
 import { ButtonProps } from '../Button';
+export type DeprecatedCopyButtonAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+export type NewCopyButtonAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+export type CopyButtonAlignment = DeprecatedCopyButtonAlignment | NewCopyButtonAlignment;
 export interface CopyButtonProps extends ButtonProps<'button'> {
     /**
      * Specify how the trigger should align with the tooltip
      */
-    align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    align?: CopyButtonAlignment;
     /**
      * **Experimental**: Will attempt to automatically align the tooltip
      */
@@ -46,7 +49,7 @@ declare namespace CopyButton {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string>;
+        align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip
          */

package/lib/components/CopyButton/CopyButton.js

@@ -18,6 +18,7 @@ var Copy = require('../Copy/Copy.js');
 var index = require('../Layout/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
+var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,6 +26,19 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    'top-left': 'top-start',
+    'top-right': 'top-end',
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end',
+    'left-bottom': 'left-end',
+    'left-top': 'left-start',
+    'right-bottom': 'right-end',
+    'right-top': 'right-start'
+  };
+  return mapping[deprecatedValue];
+};
 function CopyButton(_ref) {
   let {
     align = 'bottom',
@@ -58,7 +72,32 @@ CopyButton.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  align: deprecateValuesWithin["default"](PropTypes__default["default"].oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  //allowed prop values
+  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+  //optional mapper function
+  propMappingFunction),
   /**
    * **Experimental**: Will attempt to automatically align the tooltip
    */

package/lib/components/DataTable/Table.d.ts

@@ -33,9 +33,13 @@ interface TableProps {
      * `true` to add useZebraStyles striping.
      */
     useZebraStyles?: boolean;
+    /**
+     * Specify the table tabIndex
+     */
+    tabIndex?: number;
 }
 export declare const Table: {
-    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Pass in the children that will be rendered within the Table
@@ -70,6 +74,10 @@ export declare const Table: {
          * `true` to add useZebraStyles striping.
          */
         useZebraStyles: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the table tabIndex
+         */
+        tabIndex: PropTypes.Requireable<number>;
     };
 };
 export default Table;

package/lib/components/DataTable/Table.js

@@ -65,6 +65,7 @@ const Table = _ref => {
     stickyHeader,
     overflowMenuOnHover = true,
     experimentalAutoAlign = false,
+    tabIndex,
     ...other
   } = _ref;
   const {
@@ -140,7 +141,7 @@ const Table = _ref => {
     className: `${prefix}--data-table-content`
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
-    tabIndex: isScrollable ? 0 : undefined
+    tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
   }, /*#__PURE__*/React__default["default"].createElement("table", _rollupPluginBabelHelpers["extends"]({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId
@@ -185,7 +186,11 @@ Table.propTypes = {
   /**
    * `true` to add useZebraStyles striping.
    */
-  useZebraStyles: PropTypes__default["default"].bool
+  useZebraStyles: PropTypes__default["default"].bool,
+  /**
+   * Specify the table tabIndex
+   */
+  tabIndex: PropTypes__default["default"].number
 };
 
 exports.Table = Table;

package/lib/components/DataTable/TableSelectRow.js

@@ -40,15 +40,21 @@ const TableSelectRow = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const uniqueNameId = useId.useId();
+  const handleRadioChange = onChange ? (value, name, event) => {
+    // Convert the radio value to boolean for consistency
+    onChange(!!value, name || '', event);
+  } : undefined;
+  const handleCheckboxChange = onChange ? (checked, name, event) => {
+    onChange(checked, name, event);
+  } : undefined;
   const selectionInputProps = {
     id,
     name: name ? name : uniqueNameId,
     onClick: onSelect,
-    onChange,
     checked,
     disabled
   };
-  const InlineInputComponent = radio ? RadioButton["default"] : InlineCheckbox["default"];
+  const labelValue = ariaLabel || deprecatedAriaLabel || '';
   const tableSelectRowClasses = cx__default["default"](`${prefix}--table-column-checkbox`, {
     ...(className && {
       [className]: true
@@ -58,11 +64,13 @@ const TableSelectRow = _ref => {
   return /*#__PURE__*/React__default["default"].createElement("td", {
     className: tableSelectRowClasses,
     "aria-live": "off"
-  }, /*#__PURE__*/React__default["default"].createElement(InlineInputComponent, _rollupPluginBabelHelpers["extends"]({}, selectionInputProps, radio && {
-    labelText: ariaLabel || deprecatedAriaLabel,
+  }, radio ? /*#__PURE__*/React__default["default"].createElement(RadioButton["default"], _rollupPluginBabelHelpers["extends"]({}, selectionInputProps, {
+    labelText: labelValue,
+    onChange: handleRadioChange,
     hideLabel: true
-  }, !radio && {
-    'aria-label': ariaLabel || deprecatedAriaLabel
+  })) : /*#__PURE__*/React__default["default"].createElement(InlineCheckbox["default"], _rollupPluginBabelHelpers["extends"]({}, selectionInputProps, {
+    "aria-label": labelValue,
+    onChange: handleCheckboxChange
   })));
 };
 TableSelectRow.propTypes = {

package/lib/components/DataTable/TableToolbarSearch.js

@@ -102,7 +102,7 @@ const TableToolbarSearch = _ref => {
   const onChange = e => {
     setValue(e.target.value);
     if (onChangeProp) {
-      onChangeProp(e);
+      onChangeProp(e, e.target.value);
     }
   };
   const handleOnFocus = event => handleExpand(event, true);

package/lib/components/DataTable/stories/examples/TableToolbarFilter.d.ts

@@ -13,7 +13,7 @@ interface TableToolbarFilterProps {
     /**
      * Provide an optional hook that is called each time the input is updated
      */
-    onChange?: (event: '' | ChangeEvent<HTMLInputElement>, value?: string) => void;
+    onChange?: (event: '' | ChangeEvent<HTMLInputElement>) => void;
     /**
      * Provide an function that is called when the apply button is clicked
      */

package/lib/components/DatePicker/DatePicker.js

@@ -542,9 +542,6 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     const closeCalendar = event => {
       calendarRef.current.close();
       // Remove focus from endDate calendar input
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
       onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, {
         type: 'clickOutside'
       });
@@ -570,12 +567,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     if (!calendarRef.current || !startInputField.current) return;
     const handleKeyDown = event => {
       if (match.match(event, keys.Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
-        event.preventDefault();
         calendarRef.current.close();
-        // Remove focus from endDate calendar input
-        document.activeElement instanceof HTMLElement &&
-        // this is to fix the TS warning
-        document?.activeElement?.blur();
         onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
       }
     };

package/lib/components/DatePicker/plugins/appendToPlugin.js

@@ -13,7 +13,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * @param {object} config Plugin configuration.
  * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
  */
-var carbonFlatpickrAppendToPlugin = (config => fp => {
+var carbonFlatpickrAppendToPlugin = config => fp => {
   /**
    * Adjusts the floating menu position after Flatpicker sets it.
    */
@@ -55,6 +55,6 @@ var carbonFlatpickrAppendToPlugin = (config => fp => {
     onReady: register,
     onPreCalendarPosition: handlePreCalendarPosition
   };
-});
+};
 
 exports["default"] = carbonFlatpickrAppendToPlugin;

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -16,7 +16,7 @@ var keys = require('../../../internal/keyboard/keys.js');
  * @param {object} config Plugin configuration.
  * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
  */
-var carbonFlatpickrFixEventsPlugin = (config => fp => {
+var carbonFlatpickrFixEventsPlugin = config => fp => {
   const {
     inputFrom,
     inputTo,
@@ -80,7 +80,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
     if (inputTo === target && fp.selectedDates[1]) {
       // Using getTime() enables the ability to more readily compare the date currently
       // selected in the calendar and the date currently in the value of the input
-      const withoutTime = date => date.setHours(0, 0, 0, 0);
+      const withoutTime = date => date?.setHours(0, 0, 0, 0);
       const selectedToDate = withoutTime(new Date(fp.selectedDates[1]));
       const currentValueToDate = withoutTime(parseDateWithFormat(inputTo.value));
 
@@ -92,7 +92,7 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
         fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
       }
     }
-    const isValidDate = date => date.toString() !== 'Invalid Date';
+    const isValidDate = date => date?.toString() !== 'Invalid Date';
     // save end date in calendar inmediately after it's been written down
     if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
       if (isValidDate(parseDateWithFormat(inputTo.value))) {
@@ -154,6 +154,6 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
     onReady: [register, init],
     onDestroy: [release]
   };
-});
+};
 
 exports["default"] = carbonFlatpickrFixEventsPlugin;

package/lib/components/DatePicker/plugins/rangePlugin.js

@@ -22,7 +22,7 @@ var rangePlugin__default = /*#__PURE__*/_interopDefaultLegacy(rangePlugin);
  *     Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
  *   * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
  */
-var carbonFlatpickrRangePlugin = (config => {
+var carbonFlatpickrRangePlugin = config => {
   const factory = rangePlugin__default["default"](Object.assign({
     position: 'left'
   }, config));
@@ -57,6 +57,6 @@ var carbonFlatpickrRangePlugin = (config => {
       onPreCalendarPosition() {}
     });
   };
-});
+};
 
 exports["default"] = carbonFlatpickrRangePlugin;

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { ReactElementLike, ReactNodeArray } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
 export type ReactNodeLike = ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined;
@@ -19,6 +19,10 @@ export interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>,
      * * `range` - With calendar dropdown and a date range.
      */
     datePickerType?: 'simple' | 'single' | 'range';
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `DatePickerInput` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether or not the input should be disabled
      */
@@ -77,6 +81,7 @@ export interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>,
      */
     size?: 'sm' | 'md' | 'lg';
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `DatePickerInput` component
      */
     slug?: ReactNodeLike;

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -18,6 +18,7 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var useId = require('../../internal/useId.js');
 require('../Text/index.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -29,6 +30,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function DatePickerInput(props, ref) {
   const {
     datePickerType,
+    decorator,
     disabled = false,
     helperText,
     hideLabel,
@@ -71,7 +73,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--slug`]: slug
+    [`${prefix}--date-picker-input__wrapper--slug`]: slug,
+    [`${prefix}--date-picker-input__wrapper--decorator`]: decorator
   });
   const labelClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
@@ -105,10 +108,10 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
   }
   const input = /*#__PURE__*/React__default["default"].createElement("input", inputProps);
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -120,7 +123,9 @@ 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, normalizedSlug, isFluid && /*#__PURE__*/React__default["default"].createElement(DatePickerIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--date-picker-input-inner-wrapper--decorator`
+  }, normalizedDecorator) : '', isFluid && /*#__PURE__*/React__default["default"].createElement(DatePickerIcon, {
     datePickerType: datePickerType
   }), /*#__PURE__*/React__default["default"].createElement(DatePickerIcon, {
     datePickerType: datePickerType,
@@ -151,6 +156,10 @@ DatePickerInput.propTypes = {
    * * `range` - With calendar dropdown and a date range.
    */
   datePickerType: PropTypes__default["default"].oneOf(['simple', 'single', 'range']),
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `RadioButton` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify whether or not the input should be disabled
    */
@@ -214,10 +223,7 @@ 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']),
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `DatePickerInput` component
-   */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify the type of the `<input>`
    */

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

@@ -27,6 +27,10 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
      */
     autoAlign?: boolean;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `Dropdown` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify the direction of the dropdown. Can be either top or bottom.
      */
@@ -120,6 +124,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      */
     size?: ListBoxSize;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
      */
     slug?: ReactNode;