@carbon/react 1.40.0 → 1.41.0

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);

package/es/components/OverflowMenu/OverflowMenu.js

@@ -18,6 +18,7 @@ import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { IconButton } from '../IconButton/index.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { noopFn } from '../../internal/noopFn.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
 
@@ -114,12 +115,15 @@ class OverflowMenu extends Component {
      */
     _defineProperty(this, "_triggerRef", /*#__PURE__*/React__default.createRef());
     _defineProperty(this, "handleClick", evt => {
+      const {
+        onClick = noopFn
+      } = this.props;
       evt.stopPropagation();
       if (!this._menuBody || !this._menuBody.contains(evt.target)) {
         this.setState({
           open: !this.state.open
         });
-        this.props.onClick(evt);
+        onClick(evt);
       }
     });
     _defineProperty(this, "closeMenuAndFocus", () => {
@@ -149,6 +153,9 @@ class OverflowMenu extends Component {
       }
     });
     _defineProperty(this, "closeMenu", onCloseMenu => {
+      const {
+        onClose = noopFn
+      } = this.props;
       this.setState({
         open: false
       }, () => {
@@ -156,7 +163,7 @@ class OverflowMenu extends Component {
         if (onCloseMenu) {
           onCloseMenu();
         }
-        this.props.onClose();
+        onClose();
       });
     });
     _defineProperty(this, "focusMenuEl", () => {
@@ -221,6 +228,9 @@ class OverflowMenu extends Component {
      * @private
      */
     _defineProperty(this, "_handlePlace", menuBody => {
+      const {
+        onOpen = noopFn
+      } = this.props;
       if (menuBody) {
         this._menuBody = menuBody;
         const hasFocusin = ('onfocusin' in window);
@@ -236,7 +246,7 @@ class OverflowMenu extends Component {
             }
           }
         }, !hasFocusin);
-        this.props.onOpen();
+        onOpen();
       }
     });
     /**
@@ -251,7 +261,7 @@ class OverflowMenu extends Component {
   }
   componentDidUpdate(_, prevState) {
     const {
-      onClose
+      onClose = noopFn
     } = this.props;
     if (!this.state.open && prevState.open) {
       onClose();
@@ -288,23 +298,23 @@ class OverflowMenu extends Component {
     const prefix = this.context;
     const {
       id,
-      ['aria-label']: ariaLabel,
+      ['aria-label']: ariaLabel = null,
       ariaLabel: deprecatedAriaLabel,
       children,
-      iconDescription,
-      direction,
-      flipped,
-      focusTrap,
-      menuOffset,
-      menuOffsetFlip,
+      iconDescription = 'Options',
+      direction = DIRECTION_BOTTOM,
+      flipped = false,
+      focusTrap = true,
+      menuOffset = getMenuOffset,
+      menuOffsetFlip = getMenuOffset,
       iconClass,
-      onClick,
+      onClick = noopFn,
       // eslint-disable-line
-      onOpen,
+      onOpen = noopFn,
       // eslint-disable-line
       selectorPrimaryFocus = '[data-floating-menu-primary-focus]',
       // eslint-disable-line
-      renderIcon: IconElement,
+      renderIcon: IconElement = OverflowMenuVertical,
       // eslint-disable-next-line react/prop-types
       innerRef: ref,
       menuOptionsClass,
@@ -313,7 +323,7 @@ class OverflowMenu extends Component {
       ...other
     } = this.props;
     const {
-      open
+      open = false
     } = this.state;
     const overflowMenuClasses = cx(this.props.className, `${prefix}--overflow-menu`, {
       [`${prefix}--overflow-menu--open`]: open,
@@ -369,7 +379,7 @@ class OverflowMenu extends Component {
     }, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, other, {
       type: "button",
       "aria-haspopup": true,
-      "aria-expanded": this.state.open,
+      "aria-expanded": open,
       "aria-controls": open ? menuBodyId : null,
       className: overflowMenuClasses,
       onClick: this.handleClick,
@@ -417,7 +427,7 @@ _defineProperty(OverflowMenu, "propTypes", {
   /**
    * The icon description.
    */
-  iconDescription: PropTypes.string.isRequired,
+  iconDescription: PropTypes.string,
   /**
    * The element ID.
    */
@@ -484,22 +494,6 @@ _defineProperty(OverflowMenu, "propTypes", {
   size: PropTypes.oneOf(['sm', 'md', 'lg'])
 });
 _defineProperty(OverflowMenu, "contextType", PrefixContext);
-_defineProperty(OverflowMenu, "defaultProps", {
-  ['aria-label']: null,
-  iconDescription: 'Options',
-  open: false,
-  direction: DIRECTION_BOTTOM,
-  flipped: false,
-  focusTrap: true,
-  renderIcon: OverflowMenuVertical,
-  onClick: () => {},
-  onKeyDown: () => {},
-  onClose: () => {},
-  onOpen: () => {},
-  menuOffset: getMenuOffset,
-  menuOffsetFlip: getMenuOffset,
-  selectorPrimaryFocus: '[data-overflow-menu-primary-focus]'
-});
 (() => {
   const forwardRef = (props, ref) => /*#__PURE__*/React__default.createElement(OverflowMenu, _extends({}, props, {
     innerRef: ref

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -11,6 +11,8 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { warning } from '../../internal/warning.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 
@@ -71,7 +73,8 @@ const OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function Overflo
       className: `${prefix}--overflow-menu-options__option-content`
     }, itemText);
   })();
-  return /*#__PURE__*/React__default.createElement("li", {
+  return /*#__PURE__*/React__default.createElement(Text, {
+    as: "li",
     className: overflowMenuItemClasses,
     role: "none"
   }, /*#__PURE__*/React__default.createElement(TagToUse, _extends({

package/es/components/Pagination/experimental/PageSelector.js

@@ -18,10 +18,10 @@ import { usePrefix } from '../../../internal/usePrefix.js';
 const getInstanceId = setupGetInstanceId();
 function PageSelector(_ref) {
   let {
-    className,
+    className = null,
     currentPage,
-    id,
-    labelText,
+    id = 1,
+    labelText = 'Current page number',
     totalPages,
     ...other
   } = _ref;
@@ -63,10 +63,5 @@ PageSelector.propTypes = {
    */
   totalPages: PropTypes.number.isRequired
 };
-PageSelector.defaultProps = {
-  className: null,
-  id: 1,
-  labelText: 'Current page number'
-};
 
 export { PageSelector as default };

package/es/components/Pagination/experimental/Pagination.js

@@ -19,23 +19,23 @@ import { usePrefix } from '../../../internal/usePrefix.js';
 var _CaretLeft, _CaretRight;
 function Pagination(_ref) {
   let {
-    backwardText,
-    children,
-    className,
-    disabled,
-    forwardText,
-    id,
-    initialPage,
-    itemsPerPageText,
-    itemRangeText,
-    itemText,
+    backwardText = 'Previous page',
+    children = undefined,
+    className = null,
+    disabled = false,
+    forwardText = 'Next page',
+    id = 1,
+    initialPage = 1,
+    itemsPerPageText = 'Items per page:',
+    itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`,
+    itemText = (min, max) => `${min}–${max} items`,
     onChange,
-    pageRangeText,
-    pageSize,
-    pageSizes,
-    pageText,
-    pagesUnknown,
-    totalItems,
+    pageRangeText = (current, total) => `${current} of ${total} pages`,
+    pageSize = 10,
+    pageSizes = undefined,
+    pageText = page => `page ${page}`,
+    pagesUnknown = false,
+    totalItems = undefined,
     ...other
   } = _ref;
   const [currentPage, setCurrentPage] = useState(initialPage);
@@ -193,23 +193,5 @@ Pagination.propTypes = {
    */
   totalItems: PropTypes.number
 };
-Pagination.defaultProps = {
-  backwardText: 'Previous page',
-  className: null,
-  children: undefined,
-  disabled: false,
-  forwardText: 'Next page',
-  id: 1,
-  itemsPerPageText: 'Items per page:',
-  itemRangeText: (min, max, total) => `${min}–${max} of ${total} items`,
-  itemText: (min, max) => `${min}–${max} items`,
-  initialPage: 1,
-  pageRangeText: (current, total) => `${current} of ${total} pages`,
-  pageSize: 10,
-  pageSizes: undefined,
-  pageText: page => `page ${page}`,
-  pagesUnknown: false,
-  totalItems: undefined
-};
 
 export { Pagination as default };

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -11,6 +11,8 @@ import PropTypes from 'prop-types';
 import React__default, { useState } from 'react';
 import { Warning, Incomplete, CheckmarkOutline, CircleDash } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -114,7 +116,7 @@ function ProgressStep(_ref2) {
     secondaryLabel,
     disabled,
     onClick,
-    translateWithId: t,
+    translateWithId: t = translateWithId,
     ...rest
   } = _ref2;
   const prefix = usePrefix();
@@ -185,9 +187,11 @@ function ProgressStep(_ref2) {
     prefix: prefix
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--progress-text`
-  }, /*#__PURE__*/React__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    as: "p",
     className: `${prefix}--progress-label`
-  }, label), secondaryLabel !== null && secondaryLabel !== undefined ? /*#__PURE__*/React__default.createElement("p", {
+  }, label), secondaryLabel !== null && secondaryLabel !== undefined ? /*#__PURE__*/React__default.createElement(Text, {
+    as: "p",
     className: `${prefix}--progress-optional`
   }, secondaryLabel) : null), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--assistive-text`
@@ -250,8 +254,5 @@ ProgressStep.propTypes = {
    */
   translateWithId: PropTypes.func
 };
-ProgressStep.defaultProps = {
-  translateWithId
-};
 
 export { ProgressIndicator, ProgressStep };

package/es/components/RadioTile/RadioTile.js

@@ -13,6 +13,9 @@ import React__default from 'react';
 import { useFallbackId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
+import { noopFn } from '../../internal/noopFn.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -28,8 +31,8 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     name,
     value,
     id,
-    onChange,
-    tabIndex,
+    onChange = noopFn,
+    tabIndex = 0,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -65,7 +68,7 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     className: className
   }), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--tile__checkmark`
-  }, _CheckmarkFilled || (_CheckmarkFilled = /*#__PURE__*/React__default.createElement(CheckmarkFilled, null))), /*#__PURE__*/React__default.createElement("span", {
+  }, _CheckmarkFilled || (_CheckmarkFilled = /*#__PURE__*/React__default.createElement(CheckmarkFilled, null))), /*#__PURE__*/React__default.createElement(Text, {
     className: `${prefix}--tile-content`
   }, children)));
 });
@@ -112,10 +115,6 @@ RadioTile.propTypes = {
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 };
-RadioTile.defaultProps = {
-  onChange: () => {},
-  tabIndex: 0
-};
 var RadioTile$1 = RadioTile;
 
 export { RadioTile$1 as default };

package/es/components/Search/Search.Skeleton.d.ts

@@ -28,9 +28,6 @@ declare const SearchSkeleton: {
          */
         small: PropTypes.Requireable<boolean>;
     };
-    defaultProps: {
-        small: boolean;
-    };
 };
 export default SearchSkeleton;
 export { SearchSkeleton };