@carbon/react 1.40.0 → 1.41.0-rc.0

package/es/components/ModalWrapper/ModalWrapper.js

@@ -13,6 +13,7 @@ import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import { ButtonKinds } from '../../prop-types/types.js';
 import { warning } from '../../internal/warning.js';
+import { noopFn } from '../../internal/noopFn.js';
 
 let didWarnAboutDeprecation = false;
 class ModalWrapper extends React__default.Component {
@@ -57,19 +58,21 @@ class ModalWrapper extends React__default.Component {
   render() {
     const {
       children,
-      onKeyDown,
+      onKeyDown = noopFn,
       buttonTriggerText,
       buttonTriggerClassName,
       renderTriggerButtonIcon,
-      triggerButtonIconDescription,
-      triggerButtonKind,
-      disabled,
+      primaryButtonText = 'Save',
+      secondaryButtonText = 'Cancel',
+      triggerButtonIconDescription = 'Provide icon description if icon is used',
+      triggerButtonKind = 'primary',
+      disabled = false,
       handleSubmit,
       // eslint-disable-line no-unused-vars
-      shouldCloseAfterSubmit,
+      shouldCloseAfterSubmit = true,
       // eslint-disable-line no-unused-vars
-      selectorPrimaryFocus,
-      preventCloseOnClickOutside,
+      selectorPrimaryFocus = '[data-modal-primary-focus]',
+      preventCloseOnClickOutside = false,
       // eslint-disable-line no-unused-vars
       ...other
     } = this.props;
@@ -97,7 +100,9 @@ class ModalWrapper extends React__default.Component {
       onClick: this.handleOpen,
       ref: this.triggerButton
     }, buttonTriggerText), /*#__PURE__*/React__default.createElement(Modal, _extends({
-      ref: this.modal
+      ref: this.modal,
+      primaryButtonText: primaryButtonText,
+      secondaryButtonText: secondaryButtonText
     }, props), children));
   }
 }
@@ -126,16 +131,5 @@ _defineProperty(ModalWrapper, "propTypes", {
   triggerButtonKind: PropTypes.oneOf(ButtonKinds),
   withHeader: PropTypes.bool
 });
-_defineProperty(ModalWrapper, "defaultProps", {
-  shouldCloseAfterSubmit: true,
-  primaryButtonText: 'Save',
-  secondaryButtonText: 'Cancel',
-  triggerButtonIconDescription: 'Provide icon description if icon is used',
-  triggerButtonKind: 'primary',
-  disabled: false,
-  preventCloseOnClickOutside: false,
-  selectorPrimaryFocus: '[data-modal-primary-focus]',
-  onKeyDown: () => {}
-});
 
 export { ModalWrapper as default };

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -33,35 +33,35 @@ import { Escape, Space, Enter, Delete, Tab, Home, End } from '../../internal/key
 const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
     className: containerClassName,
-    clearSelectionDescription,
-    clearSelectionText,
-    compareItems,
-    direction,
-    disabled,
+    clearSelectionDescription = 'Total items selected: ',
+    clearSelectionText = 'To clear selection, press Delete or Backspace',
+    compareItems = defaultCompareItems,
+    direction = 'bottom',
+    disabled = false,
     downshiftProps,
-    filterItems,
+    filterItems = defaultFilterItems,
     helperText,
     hideLabel,
     id,
-    initialSelectedItems,
+    initialSelectedItems = [],
     invalid,
     invalidText,
     items,
     itemToElement: ItemToElement,
     // needs to be capitalized for react to render it correctly
-    itemToString,
+    itemToString = defaultItemToString,
     light,
-    locale,
+    locale = 'en',
     onInputValueChange,
-    open,
+    open = false,
     onChange,
     onMenuChange,
     placeholder,
     titleText,
     type,
-    selectionFeedback,
+    selectionFeedback = 'top-after-reopen',
     size,
-    sortItems,
+    sortItems = defaultSortItems,
     translateWithId,
     useTitleInItem,
     warn,
@@ -297,10 +297,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
             if (match(event, Tab)) {
               handleOnMenuChange(false);
             }
-            if (match(event, Home)) {
+            if (match(event, Home) && event.code !== 'Numpad7') {
               event.target.setSelectionRange(0, 0);
             }
-            if (match(event, End)) {
+            if (match(event, End) && event.code !== 'Numpad1') {
               event.target.setSelectionRange(event.target.value.length, event.target.value.length);
             }
           },
@@ -552,20 +552,6 @@ FilterableMultiSelect.propTypes = {
    */
   warnText: PropTypes.node
 };
-FilterableMultiSelect.defaultProps = {
-  compareItems: defaultCompareItems,
-  direction: 'bottom',
-  disabled: false,
-  filterItems: defaultFilterItems,
-  initialSelectedItems: [],
-  itemToString: defaultItemToString,
-  locale: 'en',
-  sortItems: defaultSortItems,
-  open: false,
-  selectionFeedback: 'top-after-reopen',
-  clearSelectionText: 'To clear selection, press Delete or Backspace,',
-  clearSelectionDescription: 'Total items selected: '
-};
 var FilterableMultiSelect$1 = FilterableMultiSelect;
 
 export { FilterableMultiSelect$1 as default };

package/es/components/MultiSelect/MultiSelect.js

@@ -14,7 +14,7 @@ import PropTypes from 'prop-types';
 import React__default, { useContext, useRef, useState } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
-import { defaultCompareItems, defaultSortItems } from './tools/sorting.js';
+import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
 import { useSelection } from '../../internal/Selection.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
@@ -22,11 +22,11 @@ import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import { noopFn } from '../../internal/noopFn.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
 
-const noop = () => {};
 const getInstanceId = setupGetInstanceId();
 const {
   ItemClick,
@@ -60,18 +60,18 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     items,
     itemToElement,
     itemToString = defaultItemToString,
-    titleText,
+    titleText = false,
     hideLabel,
     helperText,
     label,
-    type,
+    type = 'default',
     size,
-    disabled,
-    initialSelectedItems,
-    sortItems,
-    compareItems,
-    clearSelectionText,
-    clearSelectionDescription,
+    disabled = false,
+    initialSelectedItems = [],
+    sortItems = defaultSortItems,
+    compareItems = defaultCompareItems,
+    clearSelectionText = 'To clear selection, press Delete or Backspace',
+    clearSelectionDescription = 'Total items selected: ',
     light,
     invalid,
     invalidText,
@@ -80,14 +80,14 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     useTitleInItem,
     translateWithId,
     downshiftProps,
-    open,
-    selectionFeedback,
+    open = false,
+    selectionFeedback = 'top-after-reopen',
     onChange,
     onMenuChange,
-    direction,
+    direction = 'bottom',
     selectedItems: selected,
     readOnly,
-    locale
+    locale = 'en'
   } = _ref;
   const prefix = usePrefix();
   const {
@@ -321,7 +321,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: multiSelectFieldWrapperClasses
   }, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
     readOnly: readOnly,
-    clearSelection: !disabled && !readOnly ? clearSelection : noop,
+    clearSelection: !disabled && !readOnly ? clearSelection : noopFn,
     selectionCount: selectedItems.length
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     ,
@@ -394,7 +394,7 @@ MultiSelect.propTypes = {
    * Provide a compare function that is used to determine the ordering of
    * options. See 'sortItems' for more control.
    */
-  compareItems: PropTypes.func.isRequired,
+  compareItems: PropTypes.func,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -516,7 +516,7 @@ MultiSelect.propTypes = {
    *     locale: string,
    *   }) => Array<Item>
    */
-  sortItems: PropTypes.func.isRequired,
+  sortItems: PropTypes.func,
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * multiselect via ARIA attributes.
@@ -543,22 +543,6 @@ MultiSelect.propTypes = {
    */
   warnText: PropTypes.node
 };
-MultiSelect.defaultProps = {
-  compareItems: defaultCompareItems,
-  disabled: false,
-  locale: 'en',
-  itemToString: defaultItemToString,
-  initialSelectedItems: [],
-  sortItems: defaultSortItems,
-  type: 'default',
-  titleText: false,
-  open: false,
-  selectionFeedback: 'top-after-reopen',
-  direction: 'bottom',
-  clearSelectionText: 'To clear selection, press Delete or Backspace,',
-  clearSelectionDescription: 'Total items selected: ',
-  selectedItems: undefined
-};
 var MultiSelect$1 = MultiSelect;
 
 export { MultiSelect$1 as default };

package/es/components/MultiSelect/MultiSelectPropTypes.js

@@ -15,7 +15,7 @@ const sortingPropTypes = {
    * compareFunction :
    *  (itemA: string, itemB: string, { locale: string }) => number
    */
-  compareItems: PropTypes.func.isRequired,
+  compareItems: PropTypes.func,
   /**
    * Provide a method that sorts all options in the control. Overriding this
    * prop means that you also have to handle the sort logic for selected versus
@@ -34,7 +34,7 @@ const sortingPropTypes = {
    *     locale: string,
    *   }) => Array<Item>
    */
-  sortItems: PropTypes.func.isRequired
+  sortItems: PropTypes.func
 };
 
 export { sortingPropTypes };

package/es/components/MultiSelect/tools/sorting.js

@@ -9,8 +9,8 @@
  * Use the local `localCompare` with the `numeric` option to sort two,
  * potentially alpha-numeric, strings in a list of items.
  *
- * @param {string} itemA
- * @param {string} itemB
+ * @param {ItemType} itemA
+ * @param {ItemType} itemB
  * @param {object} options
  * @param {string} options.locale
  * @returns {number}

package/es/components/Notification/Notification.d.ts

@@ -51,6 +51,16 @@ export declare namespace NotificationActionButton {
  * ==================
  */
 export interface NotificationButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Specify a label to be read by screen readers on the container node
+     * 'aria-label' of the NotificationButton component.
+     */
+    ['aria-label']?: string;
+    /**
+     * @deprecated please use `aria-label` instead.
+     * 'aria-label' of the NotificationButton component.
+     */
+    ariaLabel?: string;
     /**
      * Specify an optional icon for the Button through a string,
      * if provided. However, regular "close" icon is preferred.
@@ -107,12 +117,6 @@ export declare namespace NotificationButton {
          */
         type: PropTypes.Requireable<string>;
     };
-    var defaultProps: {
-        "aria-label": string;
-        notificationType: string;
-        type: string;
-        renderIcon: any;
-    };
 }
 export interface NotificationIconProps {
     iconDescription: string;
@@ -248,13 +252,6 @@ export declare namespace ToastNotification {
          */
         title: PropTypes.Requireable<string>;
     };
-    var defaultProps: {
-        kind: string;
-        role: string;
-        onCloseButtonClick: () => void;
-        hideCloseButton: boolean;
-        timeout: number;
-    };
 }
 /**
  * InlineNotification
@@ -364,12 +361,6 @@ export declare namespace InlineNotification {
          */
         title: PropTypes.Requireable<string>;
     };
-    var defaultProps: {
-        kind: string;
-        role: string;
-        onCloseButtonClick: () => void;
-        hideCloseButton: boolean;
-    };
 }
 /**
  * ActionableNotification
@@ -484,7 +475,7 @@ export declare namespace ActionableNotification {
         /**
          * Specify what state the notification represents
          */
-        kind: PropTypes.Validator<string>;
+        kind: PropTypes.Requireable<string>;
         /**
          * Specify whether you are using the low contrast variant of the ActionableNotification.
          */
@@ -519,13 +510,4 @@ export declare namespace ActionableNotification {
          */
         title: PropTypes.Requireable<string>;
     };
-    var defaultProps: {
-        kind: string;
-        role: string;
-        onCloseButtonClick: () => void;
-        hideCloseButton: boolean;
-        hasFocus: boolean;
-        closeOnEscape: boolean;
-        inline: boolean;
-    };
 }

package/es/components/Notification/Notification.js

@@ -11,12 +11,15 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import deprecate from '../../prop-types/deprecate.js';
 import cx from 'classnames';
 import { Close, ErrorFilled, CheckmarkFilled, WarningFilled, WarningAltFilled, InformationFilled, InformationSquareFilled } from '@carbon/icons-react';
+import '../Text/index.js';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
+import { noopFn } from '../../internal/noopFn.js';
+import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
@@ -85,14 +88,13 @@ NotificationActionButton.propTypes = {
 
 function NotificationButton(_ref2) {
   let {
-    'aria-label': ariaLabel,
-    // @ts-expect-error: deprecated prop
+    'aria-label': ariaLabel = 'close notification',
     ariaLabel: deprecatedAriaLabel,
     className,
-    type,
-    renderIcon: IconTag,
+    type = 'button',
+    renderIcon: IconTag = Close,
     name,
-    notificationType,
+    notificationType = 'toast',
     ...rest
   } = _ref2;
   const prefix = usePrefix();
@@ -146,12 +148,6 @@ NotificationButton.propTypes = {
    */
   type: PropTypes.string
 };
-NotificationButton.defaultProps = {
-  ['aria-label']: 'close notification',
-  notificationType: 'toast',
-  type: 'button',
-  renderIcon: Close
-};
 
 /**
  * NotificationIcon
@@ -198,16 +194,16 @@ function ToastNotification(_ref4) {
     ['aria-label']: ariaLabel,
     // @ts-expect-error: deprecated prop
     ariaLabel: deprecatedAriaLabel,
-    role,
+    role = 'status',
     onClose,
-    onCloseButtonClick,
+    onCloseButtonClick = noopFn,
     statusIconDescription,
     className,
     children,
-    kind,
+    kind = 'error',
     lowContrast,
-    hideCloseButton,
-    timeout,
+    hideCloseButton = false,
+    timeout = 0,
     title,
     caption,
     subtitle,
@@ -265,11 +261,14 @@ function ToastNotification(_ref4) {
   }), /*#__PURE__*/React__default.createElement("div", {
     ref: contentRef,
     className: `${prefix}--toast-notification__details`
-  }, title && /*#__PURE__*/React__default.createElement("div", {
+  }, title && /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--toast-notification__title`
-  }, title), subtitle && /*#__PURE__*/React__default.createElement("div", {
+  }, title), subtitle && /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--toast-notification__subtitle`
-  }, subtitle), caption && /*#__PURE__*/React__default.createElement("div", {
+  }, subtitle), caption && /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--toast-notification__caption`
   }, caption), children), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
     notificationType: "toast",
@@ -343,13 +342,6 @@ ToastNotification.propTypes = {
    */
   title: PropTypes.string
 };
-ToastNotification.defaultProps = {
-  kind: 'error',
-  role: 'status',
-  onCloseButtonClick: () => {},
-  hideCloseButton: false,
-  timeout: 0
-};
 
 /**
  * InlineNotification
@@ -362,14 +354,14 @@ function InlineNotification(_ref5) {
     children,
     title,
     subtitle,
-    role,
+    role = 'status',
     onClose,
-    onCloseButtonClick,
+    onCloseButtonClick = noopFn,
     statusIconDescription,
     className,
-    kind,
+    kind = 'error',
     lowContrast,
-    hideCloseButton,
+    hideCloseButton = false,
     ...rest
   } = _ref5;
   const [isOpen, setIsOpen] = useState(true);
@@ -409,9 +401,11 @@ function InlineNotification(_ref5) {
   }), /*#__PURE__*/React__default.createElement("div", {
     ref: contentRef,
     className: `${prefix}--inline-notification__text-wrapper`
-  }, title && /*#__PURE__*/React__default.createElement("div", {
+  }, title && /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--inline-notification__title`
-  }, title), subtitle && /*#__PURE__*/React__default.createElement("div", {
+  }, title), subtitle && /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--inline-notification__subtitle`
   }, subtitle), children)), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
     notificationType: "inline",
@@ -472,12 +466,6 @@ InlineNotification.propTypes = {
    */
   title: PropTypes.string
 };
-InlineNotification.defaultProps = {
-  kind: 'error',
-  role: 'status',
-  onCloseButtonClick: () => {},
-  hideCloseButton: false
-};
 
 /**
  * ActionableNotification
@@ -491,18 +479,18 @@ function ActionableNotification(_ref6) {
     // @ts-expect-error: deprecated prop
     ariaLabel: deprecatedAriaLabel,
     children,
-    role,
+    role = 'alertdialog',
     onActionButtonClick,
     onClose,
-    onCloseButtonClick,
+    onCloseButtonClick = noopFn,
     statusIconDescription,
     className,
-    inline,
-    kind,
+    inline = false,
+    kind = 'error',
     lowContrast,
-    hideCloseButton,
-    hasFocus,
-    closeOnEscape,
+    hideCloseButton = false,
+    hasFocus = true,
+    closeOnEscape = true,
     title,
     subtitle,
     ...rest
@@ -552,10 +540,12 @@ function ActionableNotification(_ref6) {
     className: `${prefix}--actionable-notification__text-wrapper`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--actionable-notification__content`
-  }, title && /*#__PURE__*/React__default.createElement("div", {
+  }, title && /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--actionable-notification__title`,
     id: id
-  }, title), subtitle && /*#__PURE__*/React__default.createElement("div", {
+  }, title), subtitle && /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--actionable-notification__subtitle`,
     id: subtitleId
   }, subtitle), children))), actionButtonLabel && /*#__PURE__*/React__default.createElement(NotificationActionButton, {
@@ -608,7 +598,7 @@ ActionableNotification.propTypes = {
   /**
    * Specify what state the notification represents
    */
-  kind: PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']).isRequired,
+  kind: PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']),
   /**
    * Specify whether you are using the low contrast variant of the ActionableNotification.
    */
@@ -643,14 +633,5 @@ ActionableNotification.propTypes = {
    */
   title: PropTypes.string
 };
-ActionableNotification.defaultProps = {
-  kind: 'error',
-  role: 'alertdialog',
-  onCloseButtonClick: () => {},
-  hideCloseButton: false,
-  hasFocus: true,
-  closeOnEscape: true,
-  inline: false
-};
 
 export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, ToastNotification };

package/es/components/NumberInput/NumberInput.js

@@ -16,6 +16,8 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 
 var _Subtract, _Add;
 const translationIds = {
@@ -371,7 +373,8 @@ function Label(_ref) {
     [`${prefix}--visually-hidden`]: hideLabel
   });
   if (label) {
-    return /*#__PURE__*/React__default.createElement("label", {
+    return /*#__PURE__*/React__default.createElement(Text, {
+      as: "label",
       htmlFor: id,
       className: className
     }, label);
@@ -395,7 +398,8 @@ function HelperText(_ref2) {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
   if (description) {
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(Text, {
+      as: "div",
       id: id,
       className: className
     }, description);