@carbon/react 1.90.0 → 1.91.0

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

@@ -7,38 +7,40 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var rangePlugin = require('flatpickr/dist/plugins/rangePlugin');
+var baseRangePlugin = require('flatpickr/dist/plugins/rangePlugin');
 
 /**
- * @param {object} config Plugin configuration.
- * @returns {Plugin} An extension of Flatpickr `rangePlugin` that does the following:
+ * @param config Plugin configuration.
+ * @returns An extension of Flatpickr `rangePlugin` that does the following:
  *   * Better ensures the calendar dropdown is always aligned to the `<input>` for the starting date.
  *     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 => {
-  const factory = rangePlugin(Object.assign({
+const rangePlugin = (config = {}) => {
+  const factory = baseRangePlugin(Object.assign({
     position: 'left'
   }, config));
   return fp => {
-    const origSetDate = fp.setDate;
+    const {
+      setDate: origSetDate
+    } = fp;
     const init = () => {
-      fp.setDate = function setDate(dates, triggerChange, format) {
-        origSetDate.call(this, dates, triggerChange, format);
+      fp.setDate = (dates, triggerChange, format) => {
+        origSetDate(dates, triggerChange, format);
         // If `triggerChange` is `true`, `onValueUpdate` Flatpickr event is fired
         // where Flatpickr's range plugin takes care of fixing the first `<input>`
-        if (!triggerChange && dates.length === 2) {
+        if (!triggerChange && Array.isArray(dates) && dates.length === 2) {
           const {
+            formatDate,
             _input: inputFrom
           } = fp;
           const {
             input: inputTo
           } = config;
-          [inputFrom, inputTo].forEach((input, i) => {
-            if (input) {
-              input.value = !dates[i] ? '' : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
+          const inputToElement = typeof inputTo === 'string' ? document.querySelector(inputTo) : inputTo;
+          [inputFrom, inputToElement].forEach((input, i) => {
+            if (input && input instanceof HTMLInputElement) {
+              input.value = !dates[i] ? '' : formatDate(new Date(dates[i]), fp.config.dateFormat);
             }
           });
         }
@@ -50,9 +52,9 @@ var carbonFlatpickrRangePlugin = config => {
     } = origRangePlugin;
     return Object.assign(origRangePlugin, {
       onReady: [init, origOnReady],
-      onPreCalendarPosition() {}
+      onPreCalendarPosition: () => {}
     });
   };
 };
 
-exports.default = carbonFlatpickrRangePlugin;
+exports.rangePlugin = rangePlugin;

package/lib/components/Dropdown/Dropdown.js

@@ -25,6 +25,7 @@ var useId = require('../../internal/useId.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
 var index$1 = require('../AILabel/index.js');
+var defaultItemToString = require('../../internal/defaultItemToString.js');
 var utils = require('../../internal/utils.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
@@ -32,18 +33,6 @@ const {
   ItemMouseMove,
   MenuMouseLeave
 } = Downshift.useSelect.stateChangeTypes;
-const defaultItemToString = item => {
-  if (typeof item === 'string') {
-    return item;
-  }
-  if (typeof item === 'number') {
-    return `${item}`;
-  }
-  if (item !== null && typeof item === 'object' && 'label' in item && typeof item['label'] === 'string') {
-    return item['label'];
-  }
-  return '';
-};
 /**
  * Custom state reducer for `useSelect` in Downshift, providing control over
  * state changes.
@@ -90,7 +79,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   label,
   ['aria-label']: ariaLabel,
   ariaLabel: deprecatedAriaLabel,
-  itemToString = defaultItemToString,
+  itemToString = defaultItemToString.defaultItemToString,
   itemToElement = null,
   renderSelectedItem,
   type = 'default',
@@ -363,7 +352,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
     ,
     "aria-describedby": !inline && !invalid && !warn && helper ? helperId : undefined,
-    title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : defaultItemToString(label)
+    title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : defaultItemToString.defaultItemToString(label)
   }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergedRef
   }), /*#__PURE__*/React.createElement("span", {

package/lib/components/FeatureFlags/index.js

@@ -12,6 +12,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var deprecate = require('../../prop-types/deprecate.js');
 
+// TODO: Can this variable be deleted now? It isn't used anywhere.
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
  * or disable feature flags in a given React tree

package/lib/components/IconButton/index.js

@@ -80,7 +80,7 @@ IconButton.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: deprecateValuesWithin.default(PropTypes.oneOf(['top', 'top-left',
+  align: deprecateValuesWithin.deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead

package/lib/components/Menu/MenuItem.d.ts

@@ -80,7 +80,7 @@ export interface MenuItemRadioGroupProps<Item> extends Omit<ComponentProps<'ul'>
      */
     defaultSelectedItem?: Item;
     /**
-     * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
+     * Converts an item into a string for display.
      */
     itemToString?: (item: Item) => string;
     /**

package/lib/components/Menu/MenuItem.js

@@ -23,6 +23,7 @@ var MenuContext = require('./MenuContext.js');
 require('../LayoutDirection/LayoutDirection.js');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
 require('../Text/index.js');
+var defaultItemToString = require('../../internal/defaultItemToString.js');
 var Text = require('../Text/Text.js');
 
 var _Checkmark, _CaretLeft, _CaretRight;
@@ -180,15 +181,15 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
     "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp
+    onKeyUp: handleKeyUp,
+    title: label
   }, getReferenceProps()), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--menu-item__selection-icon`
   }, rest['aria-checked'] && (_Checkmark || (_Checkmark = /*#__PURE__*/React.createElement(iconsReact.Checkmark, null)))), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--menu-item__icon`
   }, IconElement && /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
-    className: `${prefix}--menu-item__label`,
-    title: label
+    className: `${prefix}--menu-item__label`
   }, label), shortcut && !hasChildren && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--menu-item__shortcut`
   }, shortcut), hasChildren && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -326,12 +327,11 @@ MenuItemGroup.propTypes = {
    */
   label: PropTypes.string.isRequired
 };
-const defaultItemToString = item => item.toString();
 const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioGroup({
   className,
   defaultSelectedItem,
   items,
-  itemToString = defaultItemToString,
+  itemToString = defaultItemToString.defaultItemToString,
   label,
   onChange,
   selectedItem,
@@ -384,7 +384,7 @@ MenuItemRadioGroup.propTypes = {
    */
   defaultSelectedItem: PropTypes.any,
   /**
-   * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
+   * Converts an item into a string for display.
    */
   itemToString: PropTypes.func,
   /**

package/lib/components/Modal/Modal.js

@@ -474,7 +474,7 @@ Modal.propTypes = {
   /**
    * Required props for the accessibility label of the header
    */
-  ['aria-label']: requiredIfGivenPropIsTruthy.default('hasScrollingContent', PropTypes.string),
+  ['aria-label']: requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string),
   /**
    * Provide the contents of your Modal
    */

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -23,7 +23,6 @@ var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
-var itemToString = require('./tools/itemToString.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var useId = require('../../internal/useId.js');
@@ -34,6 +33,7 @@ var FormContext = require('../FluidForm/FormContext.js');
 var Selection = require('../../internal/Selection.js');
 var react = require('@floating-ui/react');
 var index = require('../AILabel/index.js');
+var defaultItemToString = require('../../internal/defaultItemToString.js');
 var utils = require('../../internal/utils.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
@@ -87,7 +87,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   items,
   itemToElement: ItemToElement,
   // needs to be capitalized for react to render it correctly
-  itemToString: itemToString$1 = itemToString.defaultItemToString,
+  itemToString = defaultItemToString.defaultItemToString,
   light,
   locale = 'en',
   onInputValueChange,
@@ -121,9 +121,9 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   const [topItems, setTopItems] = React.useState(initialSelectedItems ?? []);
   const [inputFocused, setInputFocused] = React.useState(false);
   const filteredItems = React.useMemo(() => filterItems(items, {
-    itemToString: itemToString$1,
+    itemToString,
     inputValue
-  }), [items, inputValue, itemToString$1, filterItems]);
+  }), [items, inputValue, itemToString, filterItems]);
   const nonSelectAllItems = React.useMemo(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
   () => filteredItems.filter(item => !item.isSelectAll), [filteredItems]);
@@ -236,7 +236,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
         fixed: [],
         'top-after-reopen': topItems
       }[selectionFeedback],
-      itemToString: itemToString$1,
+      itemToString,
       compareItems,
       locale
     });
@@ -247,7 +247,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     }
     return sortedReal;
     // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
-  }, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString$1, compareItems, locale, sortItems, nonSelectAllItems]);
+  }, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString, compareItems, locale, sortItems, nonSelectAllItems]);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
   const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
@@ -346,7 +346,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     isOpen,
     items: sortedItems,
     // defaultHighlightedIndex: 0, // after selection, highlight the first item.
-    itemToString: itemToString$1,
+    itemToString,
     id,
     labelId,
     menuId,
@@ -720,7 +720,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       item,
       ['aria-selected']: isChecked
     });
-    const itemText = itemToString$1(item);
+    const itemText = itemToString(item);
 
     // The initial implementation using <Downshift> would place the disabled attribute
     // on disabled menu items. Conversely, useCombobox places aria-disabled instead.

package/lib/components/MultiSelect/MultiSelect.js

@@ -32,6 +32,7 @@ var noopFn = require('../../internal/noopFn.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
 var index$1 = require('../AILabel/index.js');
+var defaultItemToString = require('../../internal/defaultItemToString.js');
 var utils = require('../../internal/utils.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
@@ -50,18 +51,6 @@ const {
   ToggleButtonKeyDownPageUp,
   FunctionSetHighlightedIndex
 } = Downshift.useSelect.stateChangeTypes;
-const defaultItemToString = item => {
-  if (typeof item === 'string') {
-    return item;
-  }
-  if (typeof item === 'number') {
-    return `${item}`;
-  }
-  if (item !== null && typeof item === 'object' && 'label' in item && typeof item['label'] === 'string') {
-    return item['label'];
-  }
-  return '';
-};
 const MultiSelect = /*#__PURE__*/React.forwardRef(({
   autoAlign = false,
   className: containerClassName,
@@ -69,7 +58,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   id,
   items,
   itemToElement,
-  itemToString = defaultItemToString,
+  itemToString = defaultItemToString.defaultItemToString,
   titleText = false,
   hideLabel,
   helperText,

package/lib/components/Notification/Notification.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { type ReactNode, type MouseEvent, type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
-import { type ButtonProps } from '../Button';
+import React, { type ReactNode, type MouseEvent, type ButtonHTMLAttributes, type HTMLAttributes, type ComponentProps } from 'react';
+import Button, { type ButtonProps } from '../Button';
 export interface NotificationActionButtonProps extends ButtonProps<'button'> {
     /**
      * Specify the content of the notification action button.
@@ -23,7 +23,7 @@ export interface NotificationActionButtonProps extends ButtonProps<'button'> {
     /**
      * Optionally specify a click handler for the notification action button.
      */
-    onClick?(): void;
+    onClick?: ComponentProps<typeof Button>['onClick'];
 }
 export declare function NotificationActionButton({ children, className: customClassName, onClick, inline, ...rest }: NotificationActionButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NotificationActionButton {
@@ -404,7 +404,7 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
     /**
      * Provide a function that is called when the action is clicked
      */
-    onActionButtonClick?(): void;
+    onActionButtonClick?: ComponentProps<typeof NotificationActionButton>['onClick'];
     /**
      * Provide a function that is called when menu is closed.
      * Default behavior of hiding the notification is prevented if this function returns false.
@@ -551,7 +551,7 @@ export interface CalloutProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Provide a function that is called when the action is clicked
      */
-    onActionButtonClick?(): void;
+    onActionButtonClick?: ComponentProps<typeof NotificationActionButton>['onClick'];
     /**
      * Provide a description for "status" icon that can be read by screen readers
      */
@@ -587,7 +587,7 @@ export declare namespace Callout {
         /**
          * Specify what state the notification represents
          */
-        kind: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        kind: PropTypes.Requireable<string> | PropTypes.Validator<string>;
         /**
          * Specify whether you are using the low contrast variant of the Callout.
          */

package/lib/components/Notification/Notification.js

@@ -701,12 +701,12 @@ ActionableNotification.propTypes = {
  * @deprecated Use NewKindProps instead.
  */
 
+const mapping = {
+  error: 'warning',
+  // only redirect error -> warning
+  success: 'info' // only redirect success -> info
+};
 const propMappingFunction = deprecatedValue => {
-  const mapping = {
-    error: 'warning',
-    // only redirect error -> warning
-    success: 'info' // only redirect success -> info
-  };
   return mapping[deprecatedValue];
 };
 function Callout({
@@ -773,7 +773,7 @@ Callout.propTypes = {
   /**
    * Specify what state the notification represents
    */
-  kind: deprecateValuesWithin.default(PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']), ['warning', 'info'], propMappingFunction),
+  kind: deprecateValuesWithin.deprecateValuesWithin(PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']), ['warning', 'info'], propMappingFunction),
   /**
    * Specify whether you are using the low contrast variant of the Callout.
    */

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -348,7 +348,7 @@ OverflowMenu.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: deprecateValuesWithin.default(PropTypes.oneOf(['top', 'top-left',
+  align: deprecateValuesWithin.deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead

package/lib/components/OverflowMenu/next/index.js

@@ -168,7 +168,7 @@ OverflowMenu.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlignment: deprecateValuesWithin.default(PropTypes.oneOf(['top', 'top-left',
+  tooltipAlignment: deprecateValuesWithin.deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead

package/lib/components/PaginationNav/PaginationNav.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 import { TranslateWithId } from '../../types/common';
+type TooltipAlignment = 'start' | 'center' | 'end';
+type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 declare const translationIds: {
     readonly 'carbon.pagination-nav.next': "Next";
     readonly 'carbon.pagination-nav.previous': "Previous";
@@ -34,6 +36,14 @@ export interface DirectionButtonProps {
      * The callback function called when the button is clicked.
      */
     onClick?: React.MouseEventHandler;
+    /**
+     * Specify the alignment of the tooltip for the icon-only next/prev buttons.
+     */
+    tooltipAlignment?: TooltipAlignment;
+    /**
+     * Specify the position of the tooltip for the icon-only next/prev buttons.
+     */
+    tooltipPosition?: TooltipPosition;
 }
 export interface PaginationItemProps extends TranslateWithId<'carbon.pagination-nav.item' | 'carbon.pagination-nav.active'> {
     /**
@@ -98,6 +108,16 @@ export interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElemen
      * Specify the size of the PaginationNav.
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify the alignment of the tooltip for the icon-only next/prev buttons.
+     * Can be one of: start, center, or end.
+     */
+    tooltipAlignment?: TooltipAlignment;
+    /**
+     * Specify the position of the tooltip for the icon-only next/prev buttons.
+     * Can be one of: top, right, bottom, or left.
+     */
+    tooltipPosition?: TooltipPosition;
     /**
      * The total number of items.
      */

package/lib/components/PaginationNav/PaginationNav.js

@@ -72,13 +72,16 @@ function DirectionButton({
   direction,
   label,
   disabled,
-  onClick
+  onClick,
+  tooltipAlignment = 'center',
+  tooltipPosition = 'bottom'
 }) {
   const prefix = usePrefix.usePrefix();
+  const align = tooltipAlignment === 'center' ? tooltipPosition : `${tooltipPosition}-${tooltipAlignment}`;
   return /*#__PURE__*/React.createElement("li", {
     className: `${prefix}--pagination-nav__list-item`
   }, /*#__PURE__*/React.createElement(index.IconButton, {
-    align: "bottom",
+    align: align,
     disabled: disabled,
     kind: "ghost",
     label: label,
@@ -177,6 +180,8 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(({
   page = 0,
   loop = false,
   size = 'lg',
+  tooltipAlignment,
+  tooltipPosition,
   translateWithId: t = translateWithId,
   ...rest
 }, ref) => {
@@ -280,7 +285,9 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(({
     "aria-label": t('carbon.pagination-nav.previous'),
     label: t('carbon.pagination-nav.previous'),
     disabled: backwardButtonDisabled,
-    onClick: jumpToPrevious
+    onClick: jumpToPrevious,
+    tooltipAlignment: tooltipAlignment,
+    tooltipPosition: tooltipPosition
   }),
   // render first item if at least 5 items can be displayed or
   // 4 items can be displayed and the current page is either 0 or 1
@@ -325,7 +332,9 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(({
     "aria-label": t('carbon.pagination-nav.next'),
     label: t('carbon.pagination-nav.next'),
     disabled: forwardButtonDisabled,
-    onClick: jumpToNext
+    onClick: jumpToNext,
+    tooltipAlignment: tooltipAlignment,
+    tooltipPosition: tooltipPosition
   })), /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": "true",
@@ -348,7 +357,17 @@ DirectionButton.propTypes = {
   /**
    * The callback function called when the button is clicked.
    */
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  /**
+   * Specify how the tooltip should align with the navigation button.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
+  /**
+   * Specify the position of the tooltip relative to the navigation button.
+   * Can be one of: top, right, bottom, or left.
+   */
+  tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
 };
 PaginationItem.propTypes = {
   /**
@@ -419,6 +438,16 @@ PaginationNav.propTypes = {
    * Specify the size of the PaginationNav.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /**
+   * Specify the alignment of the tooltip for the icon-only prev/next buttons.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
+  /**
+   * Specify the position of the tooltip for the icon-only prev/next buttons.
+   * Can be one of: top, right, bottom, or left.
+   */
+  tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
   /**
    * The total number of items.
    */

package/lib/components/Popover/index.js

@@ -290,7 +290,7 @@ Popover.propTypes = {
   /**
    * Specify how the popover should align with the trigger element
    */
-  align: deprecateValuesWithin.default(PropTypes.oneOf(['top', 'top-left',
+  align: deprecateValuesWithin.deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead

package/lib/components/Search/Search.d.ts

@@ -63,7 +63,9 @@ export interface SearchProps extends InputPropsBase {
      */
     renderIcon?: ComponentType | FunctionComponent;
     /**
-     * Specify the role for the underlying `<input>`, defaults to `searchbox`
+     * @deprecated Specify the role for the underlying `<input>`.
+     * No longer needed since `<input type="search">` already provides the correct semantics.
+     * This prop will be removed in the next major release of Carbon.
      */
     role?: string;
     /**
@@ -71,7 +73,7 @@ export interface SearchProps extends InputPropsBase {
      */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * Optional prop to specify the type of the `<input>`
+     * Specify the type of the `<input>`
      */
     type?: string;
     /**

package/lib/components/Search/Search.js

@@ -43,9 +43,9 @@ const Search = /*#__PURE__*/React.forwardRef(({
   onExpand,
   placeholder = 'Search',
   renderIcon,
-  role = 'searchbox',
+  role,
   size = 'md',
-  type = 'text',
+  type = 'search',
   value,
   ...rest
 }, forwardRef) => {
@@ -242,15 +242,16 @@ Search.propTypes = {
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
+   * Deprecated, since <input type="search"> already provides correct semantics.
    * Specify the role for the underlying `<input>`, defaults to `searchbox`
    */
-  role: PropTypes.string,
+  role: deprecate.deprecate(PropTypes.string, 'The `role` prop has been deprecated since <input type="search"> already provides correct semantics. ' + 'It will be removed in the next major release of Carbon.'),
   /**
    * Specify the size of the Search
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
-   * Optional prop to specify the type of the `<input>`
+   * Specify the type of the `<input>`
    */
   type: PropTypes.string,
   /**