@carbon/react 1.90.0 → 1.91.0

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

@@ -5,36 +5,40 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
+import baseRangePlugin from '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);
             }
           });
         }
@@ -46,9 +50,9 @@ var carbonFlatpickrRangePlugin = config => {
     } = origRangePlugin;
     return Object.assign(origRangePlugin, {
       onReady: [init, origOnReady],
-      onPreCalendarPosition() {}
+      onPreCalendarPosition: () => {}
     });
   };
 };
 
-export { carbonFlatpickrRangePlugin as default };
+export { rangePlugin };

package/es/components/Dropdown/Dropdown.js

@@ -21,6 +21,7 @@ import { useId } from '../../internal/useId.js';
 import { useFloating, autoUpdate, size, flip, hide } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { AILabel } from '../AILabel/index.js';
+import { defaultItemToString } from '../../internal/defaultItemToString.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { ListBoxTypePropType, ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
 
@@ -28,18 +29,6 @@ const {
   ItemMouseMove,
   MenuMouseLeave
 } = 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.

package/es/components/FeatureFlags/index.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React, { useContext, createContext, useState, useRef, useEffect } from 'react';
 import { deprecate } from '../../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/es/components/IconButton/index.js

@@ -14,7 +14,7 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import ButtonBase from '../Button/ButtonBase.js';
-import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin.js';
 import { BadgeIndicator } from '../BadgeIndicator/index.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 

package/es/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/es/components/Menu/MenuItem.js

@@ -21,6 +21,7 @@ import { MenuContext } from './MenuContext.js';
 import '../LayoutDirection/LayoutDirection.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
 import '../Text/index.js';
+import { defaultItemToString } from '../../internal/defaultItemToString.js';
 import { Text } from '../Text/Text.js';
 
 var _Checkmark, _CaretLeft, _CaretRight;
@@ -178,15 +179,15 @@ const MenuItem = /*#__PURE__*/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(Checkmark, null)))), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--menu-item__icon`
   }, IconElement && /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(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", {
@@ -324,7 +325,6 @@ MenuItemGroup.propTypes = {
    */
   label: PropTypes.string.isRequired
 };
-const defaultItemToString = item => item.toString();
 const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup({
   className,
   defaultSelectedItem,
@@ -382,7 +382,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/es/components/Modal/Modal.js

@@ -16,7 +16,7 @@ import '../Button/Button.Skeleton.js';
 import ButtonSet from '../ButtonSet/ButtonSet.js';
 import InlineLoading from '../InlineLoading/InlineLoading.js';
 import { Layer } from '../Layer/index.js';
-import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
+import { requiredIfGivenPropIsTruthy } from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import { wrapFocus, wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -21,7 +21,6 @@ import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { Space, Enter, Delete, Escape, Tab, Home, End } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
-import { defaultItemToString } from './tools/itemToString.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { useId } from '../../internal/useId.js';
@@ -32,6 +31,7 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { useSelection } from '../../internal/Selection.js';
 import { useFloating, autoUpdate, flip, size, hide } from '@floating-ui/react';
 import { AILabel } from '../AILabel/index.js';
+import { defaultItemToString } from '../../internal/defaultItemToString.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { ListBoxTypePropType, ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
 

package/es/components/MultiSelect/MultiSelect.js

@@ -30,6 +30,7 @@ import { noopFn } from '../../internal/noopFn.js';
 import { useFloating, autoUpdate, flip, size, hide } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { AILabel } from '../AILabel/index.js';
+import { defaultItemToString } from '../../internal/defaultItemToString.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { ListBoxTypePropType, ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
 
@@ -48,18 +49,6 @@ const {
   ToggleButtonKeyDownPageUp,
   FunctionSetHighlightedIndex
 } = 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,

package/es/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/es/components/Notification/Notification.js

@@ -24,7 +24,7 @@ import { noopFn } from '../../internal/noopFn.js';
 import { wrapFocusWithoutSentinels, wrapFocus } from '../../internal/wrapFocus.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { warning } from '../../internal/warning.js';
-import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin.js';
 import { Text } from '../Text/Text.js';
 
 /**
@@ -699,12 +699,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({

package/es/components/OverflowMenu/OverflowMenu.js

@@ -21,7 +21,7 @@ import mergeRefs from '../../tools/mergeRefs.js';
 import { setupGetInstanceId } from '../../tools/setupGetInstanceId.js';
 import { IconButton } from '../IconButton/index.js';
 import { useOutsideClick } from '../../internal/useOutsideClick.js';
-import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 const getInstanceId = setupGetInstanceId();

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

@@ -19,7 +19,7 @@ import mergeRefs from '../../../tools/mergeRefs.js';
 import { useId } from '../../../internal/useId.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 import { useAttachedMenu } from '../../../internal/useAttachedMenu.js';
-import deprecateValuesWithin from '../../../prop-types/deprecateValuesWithin.js';
+import { deprecateValuesWithin } from '../../../prop-types/deprecateValuesWithin.js';
 import { mapPopoverAlign } from '../../../tools/mapPopoverAlign.js';
 
 const defaultSize = 'md';

package/es/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/es/components/PaginationNav/PaginationNav.js

@@ -68,13 +68,16 @@ function DirectionButton({
   direction,
   label,
   disabled,
-  onClick
+  onClick,
+  tooltipAlignment = 'center',
+  tooltipPosition = 'bottom'
 }) {
   const prefix = usePrefix();
+  const align = tooltipAlignment === 'center' ? tooltipPosition : `${tooltipPosition}-${tooltipAlignment}`;
   return /*#__PURE__*/React.createElement("li", {
     className: `${prefix}--pagination-nav__list-item`
   }, /*#__PURE__*/React.createElement(IconButton, {
-    align: "bottom",
+    align: align,
     disabled: disabled,
     kind: "ghost",
     label: label,
@@ -173,6 +176,8 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(({
   page = 0,
   loop = false,
   size = 'lg',
+  tooltipAlignment,
+  tooltipPosition,
   translateWithId: t = translateWithId,
   ...rest
 }, ref) => {
@@ -276,7 +281,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
@@ -321,7 +328,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",
@@ -344,7 +353,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 = {
   /**
@@ -415,6 +434,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/es/components/Popover/index.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { deprecateValuesWithin } from '../../prop-types/deprecateValuesWithin.js';
 import React, { useRef, useMemo, useEffect } from 'react';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';

package/es/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/es/components/Search/Search.js

@@ -39,9 +39,9 @@ const Search = /*#__PURE__*/React.forwardRef(({
   onExpand,
   placeholder = 'Search',
   renderIcon,
-  role = 'searchbox',
+  role,
   size = 'md',
-  type = 'text',
+  type = 'search',
   value,
   ...rest
 }, forwardRef) => {
@@ -238,15 +238,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(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,
   /**