@carbon/react 1.40.0 → 1.41.0-rc.0

package/es/components/UIShell/SideNavIcon.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+interface SideNavIconProps {
+    /**
+     * Provide a single icon as the child to `SideNavIcon` to render in the
+     * container
+     */
+    children: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Specify whether the icon should be placed in a smaller bounding box
+     * Since the 'small' prop is not provided, we make it optional and set a default value to `false`.
+     */
+    small?: boolean;
+}
+declare const SideNavIcon: React.FC<SideNavIconProps>;
+export default SideNavIcon;

package/es/components/UIShell/SideNavIcon.js

@@ -10,11 +10,11 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function SideNavIcon(_ref) {
+const SideNavIcon = _ref => {
   let {
     children,
     className: customClassName,
-    small
+    small = false
   } = _ref;
   const prefix = usePrefix();
   const className = cx({
@@ -25,7 +25,7 @@ function SideNavIcon(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: className
   }, children);
-}
+};
 SideNavIcon.propTypes = {
   /**
    * Provide a single icon as the child to `SideNavIcon` to render in the
@@ -39,10 +39,7 @@ SideNavIcon.propTypes = {
   /**
    * Specify whether the icon should be placed in a smaller bounding box
    */
-  small: PropTypes.bool.isRequired
-};
-SideNavIcon.defaultProps = {
-  small: false
+  small: PropTypes.bool
 };
 
 export { SideNavIcon as default };

package/es/components/UIShell/SideNavSwitcher.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ChangeEventHandler } from 'react';
+interface SideNavSwitcherProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Provide the label for the switcher. This will be the first visible option
+     * when someone views this control
+     */
+    labelText: string;
+    /**
+     * Provide a callback function that is called whenever the switcher value is
+     * updated
+     */
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Provide an array of options to be rendered in the switcher as an
+     * `<option>`. The text value will be what is displayed to the user and is set
+     * as the `value` prop for each `<option>`.
+     */
+    options: string[];
+}
+declare const SideNavSwitcher: React.ForwardRefExoticComponent<SideNavSwitcherProps & React.RefAttributes<HTMLSelectElement>>;
+export default SideNavSwitcher;

package/es/components/UIShell/SideNavSwitcher.js

@@ -8,12 +8,12 @@
 import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
-import { usePrefix } from '../../internal/usePrefix.js';
+import React__default, { forwardRef } from 'react';
 import { useId } from '../../internal/useId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
 
 var _ChevronDown;
-const SideNavSwitcher = /*#__PURE__*/React__default.forwardRef(function SideNavSwitcher(props, ref) {
+const SideNavSwitcher = /*#__PURE__*/forwardRef(function SideNavSwitcher(props, ref) {
   const id = useId('side-nav-switcher');
   const prefix = usePrefix();
   const {
@@ -23,6 +23,7 @@ const SideNavSwitcher = /*#__PURE__*/React__default.forwardRef(function SideNavS
     options
   } = props;
   const className = cx(`${prefix}--side-nav__switcher`, customClassName);
+
   // Note for usage around `onBlur`: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
   return /*#__PURE__*/React__default.createElement("div", {
     className: className
@@ -72,8 +73,8 @@ SideNavSwitcher.propTypes = {
    * `<option>`. The text value will be what is displayed to the user and is set
    * as the `value` prop for each `<option>`.
    */
+  // @ts-expect-error
   options: PropTypes.arrayOf(PropTypes.string).isRequired
 };
-var SideNavSwitcher$1 = SideNavSwitcher;
 
-export { SideNavSwitcher$1 as default };
+export { SideNavSwitcher as default };

package/es/index.js

@@ -44,6 +44,7 @@ export { default as FluidForm } from './components/FluidForm/FluidForm.js';
 export { FormContext } from './components/FluidForm/FormContext.js';
 export { default as Form } from './components/Form/Form.js';
 export { default as FormGroup } from './components/FormGroup/FormGroup.js';
+export { default as FormItem } from './components/FormItem/FormItem.js';
 export { default as FormLabel } from './components/FormLabel/FormLabel.js';
 export { FlexGrid } from './components/Grid/FlexGrid.js';
 export { Grid } from './components/Grid/Grid.js';
@@ -154,7 +155,6 @@ export { default as useContextMenu } from './components/ContextMenu/useContextMe
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary.js';
-export { default as FormItem } from './components/FormItem/FormItem.js';
 export { default as InlineLoading } from './components/InlineLoading/InlineLoading.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
 export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';

package/es/internal/FloatingMenu.js

@@ -195,13 +195,13 @@ class FloatingMenu extends React__default.Component {
       } = prevProps;
       const {
         menuOffset = {},
-        menuDirection
+        menuDirection = DIRECTION_BOTTOM
       } = _this.props;
       if (hasChangeInOffset(oldMenuOffset, menuOffset) || oldMenuDirection !== menuDirection || isAdjustment) {
         const {
           flipped,
           triggerRef,
-          updateOrientation
+          updateOrientation = null
         } = _this.props;
         const {
           current: triggerEl
@@ -455,11 +455,6 @@ _defineProperty(FloatingMenu, "propTypes", {
    */
   updateOrientation: PropTypes.func
 });
-_defineProperty(FloatingMenu, "defaultProps", {
-  menuOffset: {},
-  menuDirection: DIRECTION_BOTTOM,
-  updateOrientation: null
-});
 var FloatingMenu$1 = FloatingMenu;
 
 export { DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP, FloatingMenu$1 as default };

package/es/internal/Selection.js

@@ -189,9 +189,6 @@ _defineProperty(Selection, "propTypes", {
   onChange: PropTypes.func,
   render: PropTypes.func
 });
-_defineProperty(Selection, "defaultProps", {
-  initialSelectedItems: []
-});
 const removeAtIndex = (array, index) => {
   const result = array.slice();
   result.splice(index, 1);

package/es/internal/noopFn.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const noopFn: () => void;

package/es/internal/noopFn.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const noopFn = () => {};
+
+export { noopFn };

package/es/internal/useNormalizedInputProps.js

@@ -8,6 +8,8 @@
 import React__default from 'react';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { usePrefix } from './usePrefix.js';
+import '../components/Text/index.js';
+import { Text } from '../components/Text/Text.js';
 
 /**
  * @typedef {object} InputProps
@@ -68,13 +70,15 @@ function useNormalizedInputProps(_ref) {
   };
   if (normalizedProps.invalid) {
     normalizedProps.icon = WarningFilled;
-    normalizedProps.validation = /*#__PURE__*/React__default.createElement("div", {
+    normalizedProps.validation = /*#__PURE__*/React__default.createElement(Text, {
+      as: "div",
       className: `${prefix}--form-requirement`,
       id: normalizedProps.invalidId
     }, invalidText);
   } else if (normalizedProps.warn) {
     normalizedProps.icon = WarningAltFilled;
-    normalizedProps.validation = /*#__PURE__*/React__default.createElement("div", {
+    normalizedProps.validation = /*#__PURE__*/React__default.createElement(Text, {
+      as: "div",
       className: `${prefix}--form-requirement`,
       id: normalizedProps.warnId
     }, warnText);

package/lib/components/Accordion/Accordion.Skeleton.d.ts

@@ -54,11 +54,6 @@ declare namespace AccordionSkeleton {
          */
         open: PropTypes.Requireable<boolean>;
     };
-    var defaultProps: {
-        open: boolean;
-        count: number;
-        align: string;
-    };
 }
 export default AccordionSkeleton;
 export { AccordionSkeleton };

package/lib/components/Accordion/Accordion.Skeleton.js

@@ -85,11 +85,6 @@ AccordionSkeleton.propTypes = {
    */
   open: PropTypes__default["default"].bool
 };
-AccordionSkeleton.defaultProps = {
-  open: true,
-  count: 4,
-  align: 'end'
-};
 function AccordionSkeletonItem() {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("li", {

package/lib/components/Breadcrumb/BreadcrumbItem.js

@@ -16,6 +16,8 @@ var cx = require('classnames');
 var Link = require('../Link/Link.js');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
+require('../Text/index.js');
+var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -62,7 +64,7 @@ const BreadcrumbItem = /*#__PURE__*/React__default["default"].forwardRef(functio
     }, rest), href ? /*#__PURE__*/React__default["default"].createElement(Link["default"], {
       href: href,
       "aria-current": ariaCurrent
-    }, children) : /*#__PURE__*/React__default["default"].createElement("span", {
+    }, children) : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       className: `${prefix}--link`
     }, children));
   }

package/lib/components/Checkbox/Checkbox.js

@@ -17,6 +17,7 @@ require('../Text/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var noopFn = require('../../internal/noopFn.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -32,9 +33,9 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     helperText,
     id,
     labelText,
-    onChange,
+    onChange = noopFn.noopFn,
     onClick,
-    indeterminate,
+    indeterminate = false,
     invalid,
     invalidText,
     hideLabel,
@@ -187,10 +188,6 @@ Checkbox.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-Checkbox.defaultProps = {
-  onChange: () => {},
-  indeterminate: false
-};
 Checkbox.displayName = 'Checkbox';
 
 exports["default"] = Checkbox;

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -41,21 +41,21 @@ function CodeSnippet(_ref) {
   let {
     align = 'bottom',
     className,
-    type,
+    type = 'single',
     children,
     disabled,
     feedback,
     feedbackTimeout,
     onClick,
-    ['aria-label']: ariaLabel,
+    ['aria-label']: ariaLabel = 'Copy to clipboard',
     ariaLabel: deprecatedAriaLabel,
     copyText,
     copyButtonDescription,
     light,
-    showMoreText,
-    showLessText,
+    showMoreText = 'Show more',
+    showLessText = 'Show less',
     hideCopyButton,
-    wrapText,
+    wrapText = false,
     maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows,
     maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows,
     minCollapsedNumberOfRows = defaultMinCollapsedNumberOfRows,
@@ -330,12 +330,5 @@ CodeSnippet.propTypes = {
    */
   wrapText: PropTypes__default["default"].bool
 };
-CodeSnippet.defaultProps = {
-  ['aria-label']: 'Copy to clipboard',
-  type: 'single',
-  showMoreText: 'Show more',
-  showLessText: 'Show less',
-  wrapText: false
-};
 
 exports["default"] = CodeSnippet;

package/lib/components/ComboBox/ComboBox.d.ts

@@ -6,7 +6,7 @@
  */
 import Downshift from 'downshift';
 import { type ComponentProps, type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithoutRef, type InputHTMLAttributes, type MouseEvent } from 'react';
-import { ListBoxType, ListBoxSize } from '../ListBox';
+import { ListBoxSize } from '../ListBox';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
 interface OnChangeData<ItemType> {
     selectedItem: ItemType | null;
@@ -139,10 +139,6 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      * and returns the localized string for the message
      */
     translateWithId?: (id: string) => string;
-    /**
-     * Currently supports either the default type, or an inline variant
-     */
-    type?: ListBoxType;
     /**
      * Specify whether the control is currently in warning state
      */

package/lib/components/ComboBox/ComboBox.js

@@ -97,8 +97,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     ['aria-label']: ariaLabel = 'Choose an item',
     ariaLabel: deprecatedAriaLabel,
     className: containerClassName,
-    direction,
-    disabled,
+    direction = 'bottom',
+    disabled = false,
     downshiftProps,
     helperText,
     id,
@@ -106,7 +106,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     invalid,
     invalidText,
     items,
-    itemToElement,
+    itemToElement = null,
     itemToString = defaultItemToString,
     light,
     onChange,
@@ -119,7 +119,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     size,
     titleText,
     translateWithId,
-    type: _type,
     warn,
     warnText,
     ...rest
@@ -324,10 +323,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
             event?.persist?.();
           }
         }
-        if (match.match(event, keys.Home)) {
+        if (match.match(event, keys.Home) && event.code !== 'Numpad7') {
           event.target.setSelectionRange(0, 0);
         }
-        if (match.match(event, keys.End)) {
+        if (match.match(event, keys.End) && event.code !== 'Numpad1') {
           event.target.setSelectionRange(event.target.value.length, event.target.value.length);
         }
       }
@@ -546,10 +545,6 @@ ComboBox.propTypes = {
    * and returns the localized string for the message
    */
   translateWithId: PropTypes__default["default"].func,
-  /**
-   * Currently supports either the default type, or an inline variant
-   */
-  type: ListBoxPropTypes.ListBoxType,
   /**
    * Specify whether the control is currently in warning state
    */
@@ -559,14 +554,5 @@ ComboBox.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-ComboBox.defaultProps = {
-  disabled: false,
-  itemToString: defaultItemToString,
-  itemToElement: null,
-  shouldFilterItem: defaultShouldFilterItem,
-  type: 'default',
-  ['aria-label']: 'Choose an item',
-  direction: 'bottom'
-};
 
 exports["default"] = ComboBox;

package/lib/components/ComposedModal/ComposedModal.js

@@ -88,7 +88,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     onKeyDown,
     open,
     preventCloseOnClickOutside,
-    selectorPrimaryFocus,
+    selectorPrimaryFocus = '[data-modal-primary-focus]',
     selectorsFloatingMenus,
     size,
     launcherButtonRef,
@@ -306,9 +306,6 @@ ComposedModal.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])
 };
-ComposedModal.defaultProps = {
-  selectorPrimaryFocus: '[data-modal-primary-focus]'
-};
 
 exports.ModalBody = ModalBody;
 exports["default"] = ComposedModal;

package/lib/components/ComposedModal/ModalFooter.js

@@ -17,6 +17,7 @@ require('../Button/Button.Skeleton.js');
 var ButtonSet = require('../ButtonSet/ButtonSet.js');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var noopFn = require('../../internal/noopFn.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -84,11 +85,11 @@ const ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function M
   let {
     children,
     className: customClassName,
-    closeModal,
+    closeModal = noopFn.noopFn,
     danger,
     inputref,
-    onRequestClose,
-    onRequestSubmit,
+    onRequestClose = noopFn.noopFn,
+    onRequestSubmit = noopFn.noopFn,
     primaryButtonDisabled,
     primaryButtonText,
     primaryClassName,
@@ -200,11 +201,5 @@ ModalFooter.propTypes = {
    */
   secondaryClassName: PropTypes__default["default"].string
 };
-const noop = () => {};
-ModalFooter.defaultProps = {
-  onRequestClose: noop,
-  onRequestSubmit: noop,
-  closeModal: noop
-};
 
 exports.ModalFooter = ModalFooter;

package/lib/components/ComposedModal/ModalHeader.js

@@ -30,7 +30,7 @@ const ModalHeader = /*#__PURE__*/React__default["default"].forwardRef(function M
     closeClassName,
     closeIconClassName,
     closeModal,
-    iconDescription,
+    iconDescription = 'Close',
     label,
     labelClassName,
     title,
@@ -114,8 +114,5 @@ ModalHeader.propTypes = {
    */
   titleClassName: PropTypes__default["default"].string
 };
-ModalHeader.defaultProps = {
-  iconDescription: 'Close'
-};
 
 exports.ModalHeader = ModalHeader;

package/lib/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -91,16 +91,11 @@ export default class ContentSwitcher extends React.Component<ContentSwitcherProp
         size: PropTypes.Requireable<string>;
     };
     static contextType: React.Context<string>;
-    static defaultProps: {
-        selectedIndex: number;
-        selectionMode: string;
-        onChange: () => void;
-    };
     static getDerivedStateFromProps({ selectedIndex }: {
-        selectedIndex: any;
+        selectedIndex?: number | undefined;
     }, state: any): {
-        selectedIndex: any;
-        prevSelectedIndex: any;
+        selectedIndex: number;
+        prevSelectedIndex: number;
     } | null;
     handleItemRef: (index: any) => (ref: any) => void;
     handleChildChange: (data: any) => void;

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -17,6 +17,7 @@ var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../Layout/index.js');
 var events = require('../../tools/events.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var noopFn = require('../../internal/noopFn.js');
 var match = require('../../internal/keyboard/match.js');
 var navigation = require('../../internal/keyboard/navigation.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -44,7 +45,7 @@ class ContentSwitcher extends React__default["default"].Component {
     });
     _rollupPluginBabelHelpers.defineProperty(this, "handleChildChange", data => {
       const {
-        selectionMode
+        selectionMode = 'automatic'
       } = this.props;
       // the currently selected child index
       const {
@@ -94,7 +95,7 @@ class ContentSwitcher extends React__default["default"].Component {
   }
   static getDerivedStateFromProps(_ref, state) {
     let {
-      selectedIndex
+      selectedIndex = 0
     } = _ref;
     const {
       prevSelectedIndex
@@ -111,12 +112,12 @@ class ContentSwitcher extends React__default["default"].Component {
       className,
       light,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      selectedIndex,
-      // eslint-disable-line no-unused-vars
+      selectedIndex = 0,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      selectionMode,
-      // eslint-disable-line no-unused-vars
+      selectionMode = 'automatic',
       size,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onChange = noopFn.noopFn,
       ...other
     } = this.props;
     const isIconOnly = React__default["default"].Children?.map(children, child => {
@@ -181,10 +182,5 @@ _rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "propTypes", {
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
 });
 _rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "contextType", usePrefix.PrefixContext);
-_rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "defaultProps", {
-  selectedIndex: 0,
-  selectionMode: 'automatic',
-  onChange: () => {}
-});
 
 exports["default"] = ContentSwitcher;

package/lib/components/Copy/Copy.js

@@ -17,6 +17,7 @@ var cx = require('classnames');
 var events = require('../../tools/events.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var index = require('../IconButton/index.js');
+var noopFn = require('../../internal/noopFn.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,10 +31,10 @@ function Copy(_ref) {
     align = 'bottom',
     children,
     className,
-    feedback,
-    feedbackTimeout,
+    feedback = 'Copied!',
+    feedbackTimeout = 2000,
     onAnimationEnd,
-    onClick,
+    onClick = noopFn.noopFn,
     ...other
   } = _ref;
   const [animation, setAnimation] = React.useState('');
@@ -103,10 +104,5 @@ Copy.propTypes = {
    */
   onClick: PropTypes__default["default"].func
 };
-Copy.defaultProps = {
-  feedback: 'Copied!',
-  feedbackTimeout: 2000,
-  onClick: () => {}
-};
 
 exports["default"] = Copy;

package/lib/components/CopyButton/CopyButton.js

@@ -17,6 +17,7 @@ var iconsReact = require('@carbon/icons-react');
 var Copy = require('../Copy/Copy.js');
 var index = require('../Layout/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var noopFn = require('../../internal/noopFn.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,8 +28,11 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 function CopyButton(_ref) {
   let {
     align = 'bottom',
-    iconDescription,
+    feedback = 'Copied!',
+    feedbackTimeout = 2000,
+    iconDescription = 'Copy to clipboard',
     className,
+    onClick = noopFn.noopFn,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -38,6 +42,9 @@ function CopyButton(_ref) {
       max: 'lg'
     }
   }, /*#__PURE__*/React__default["default"].createElement(Copy["default"], _rollupPluginBabelHelpers["extends"]({
+    feedback: feedback,
+    feedbackTimeout: feedbackTimeout,
+    onClick: onClick,
     align: align,
     className: cx__default["default"](className, `${prefix}--copy-btn`),
     "aria-label": iconDescription
@@ -74,11 +81,5 @@ CopyButton.propTypes = {
    */
   onClick: PropTypes__default["default"].func
 };
-CopyButton.defaultProps = {
-  iconDescription: 'Copy to clipboard',
-  feedback: 'Copied!',
-  feedbackTimeout: 2000,
-  onClick: () => {}
-};
 
 exports["default"] = CopyButton;