@carbon/react 1.90.0 → 1.91.0-rc.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/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,
   /**