@carbon/react 1.52.0 → 1.53.0

package/es/components/Tag/SelectableTag.d.ts

@@ -0,0 +1,87 @@
+/**
+ * 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 PropTypes, { ReactNodeLike } from 'prop-types';
+import React from 'react';
+import { PolymorphicProps } from '../../types/common';
+import { SIZES } from './Tag';
+export interface SelectableTagBaseProps {
+    /**
+     * Provide content to be rendered inside of a `SelectableTag`
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom className that is applied to the containing <span>
+     */
+    className?: string;
+    /**
+     * Specify if the `SelectableTag` is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the id for the selectabletag.
+     */
+    id?: string;
+    /**
+     * Optional prop to render a custom icon.
+     * Can be a React component class
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Specify the state of the selectable tag.
+     */
+    selected?: boolean;
+    /**
+     * Specify the size of the Tag. Currently supports either `sm`,
+     * `md` (default) or `lg` sizes.
+     */
+    size?: keyof typeof SIZES;
+    /**
+     * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
+     */
+    slug?: ReactNodeLike;
+}
+export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
+declare const SelectableTag: {
+    <T extends React.ElementType<any>>({ children, className, disabled, id, renderIcon, selected, slug, size, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Provide content to be rendered inside of a `SelectableTag`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className that is applied to the containing <span>
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the `SelectableTag` is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the id for the tag.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Optional prop to render a custom icon.
+         * Can be a React component class
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify the state of the selectable tag.
+         */
+        selected: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the size of the Tag. Currently supports either `sm`,
+         * `md` (default) or `lg` sizes.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
+         */
+        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export default SelectableTag;

package/es/components/Tag/Tag.d.ts

@@ -7,7 +7,7 @@
 import PropTypes, { ReactNodeLike } from 'prop-types';
 import React from 'react';
 import { PolymorphicProps } from '../../types/common';
-declare const TYPES: {
+export declare const TYPES: {
     red: string;
     magenta: string;
     purple: string;
@@ -21,6 +21,11 @@ declare const TYPES: {
     'high-contrast': string;
     outline: string;
 };
+export declare const SIZES: {
+    sm: string;
+    md: string;
+    lg: string;
+};
 export interface TagBaseProps {
     /**
      * Provide content to be rendered inside of a `Tag`
@@ -35,7 +40,7 @@ export interface TagBaseProps {
      */
     disabled?: boolean;
     /**
-     * Determine if `Tag` is a filter/chip
+     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     filter?: boolean;
     /**
@@ -43,7 +48,7 @@ export interface TagBaseProps {
      */
     id?: string;
     /**
-     * Click handler for filter tag close button.
+     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
@@ -52,16 +57,16 @@ export interface TagBaseProps {
      */
     renderIcon?: React.ElementType;
     /**
-     * Specify the size of the Tag. Currently supports either `sm` or
-     * 'md' (default) sizes.
+     * Specify the size of the Tag. Currently supports either `sm`,
+     * `md` (default) or `lg` sizes.
      */
-    size?: 'sm' | 'md';
+    size?: keyof typeof SIZES;
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
      */
     slug?: ReactNodeLike;
     /**
-     * Text to show on clear filters
+     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     title?: string;
     /**
@@ -93,7 +98,7 @@ declare const Tag: {
         /**
          * Determine if `Tag` is a filter/chip
          */
-        filter: PropTypes.Requireable<boolean>;
+        filter: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Specify the id for the tag.
          */
@@ -101,15 +106,15 @@ declare const Tag: {
         /**
          * Click handler for filter tag close button.
          */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Optional prop to render a custom icon.
          * Can be a React component class
          */
         renderIcon: PropTypes.Requireable<object>;
         /**
-         * Specify the size of the Tag. Currently supports either `sm` or
-         * 'md' (default) sizes.
+         * Specify the size of the Tag. Currently supports either `sm`,
+         * `md` (default) or `lg` sizes.
          */
         size: PropTypes.Requireable<string>;
         /**
@@ -119,7 +124,7 @@ declare const Tag: {
         /**
          * Text to show on clear filters
          */
-        title: PropTypes.Requireable<string>;
+        title: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Specify the type of the `Tag`
          */

package/es/components/Tag/Tag.js

@@ -13,6 +13,7 @@ import { Close } from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { Text } from '../Text/Text.js';
 
 var _Close;
@@ -31,6 +32,11 @@ const TYPES = {
   'high-contrast': 'High-Contrast',
   outline: 'Outline'
 };
+const SIZES = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg'
+};
 const Tag = _ref => {
   let {
     children,
@@ -38,10 +44,13 @@ const Tag = _ref => {
     id,
     type,
     filter,
+    // remove filter in next major release - V12
     renderIcon: CustomIconElement,
     title = 'Clear filter',
+    // remove title in next major release - V12
     disabled,
     onClose,
+    // remove onClose in next major release - V12
     size,
     as: BaseComponent,
     slug,
@@ -49,6 +58,8 @@ const Tag = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const tagId = id || `tag-${getInstanceId()}`;
+  const conditions = [`${prefix}--tag--selectable`, `${prefix}--tag--filter`, `${prefix}--tag--operational`];
+  const isInteractiveTag = conditions.some(el => className?.includes(el));
   const tagClasses = cx(`${prefix}--tag`, className, {
     [`${prefix}--tag--disabled`]: disabled,
     [`${prefix}--tag--filter`]: filter,
@@ -56,7 +67,7 @@ const Tag = _ref => {
     // TODO: V12 - Remove this class
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--tag--${type}`]: type,
-    [`${prefix}--tag--interactive`]: other.onClick && !filter
+    [`${prefix}--tag--interactive`]: other.onClick && !isInteractiveTag
   });
   const typeText = type !== undefined && type in Object.keys(TYPES) ? TYPES[type] : '';
   const handleClose = event => {
@@ -68,7 +79,7 @@ const Tag = _ref => {
 
   // Slug is always size `md` and `inline`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'Slug' && !isInteractiveTag) {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'sm',
       kind: 'inline'
@@ -79,7 +90,7 @@ const Tag = _ref => {
     return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
       className: tagClasses,
       id: tagId
-    }, other), CustomIconElement ? /*#__PURE__*/React__default.createElement("div", {
+    }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default.createElement("div", {
       className: `${prefix}--tag__custom-icon`
     }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(Text, {
       className: `${prefix}--tag__label`,
@@ -93,16 +104,14 @@ const Tag = _ref => {
       title: title
     }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
   }
-  const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
+  const ComponentTag = BaseComponent ?? (other.onClick || className?.includes(`${prefix}--tag--operational`) ? 'button' : 'div');
   return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
-    disabled: ComponentTag === 'button' ? disabled : null,
+    disabled: disabled,
     className: tagClasses,
     id: tagId
-  }, other), CustomIconElement ? /*#__PURE__*/React__default.createElement("div", {
+  }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tag__custom-icon`
-  }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(Text, {
-    title: typeof children === 'string' ? children : undefined
-  }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
+  }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(Text, null, children !== null && children !== undefined ? children : typeText), normalizedSlug);
 };
 Tag.propTypes = {
   /**
@@ -125,7 +134,7 @@ Tag.propTypes = {
   /**
    * Determine if `Tag` is a filter/chip
    */
-  filter: PropTypes.bool,
+  filter: deprecate(PropTypes.bool, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the id for the tag.
    */
@@ -133,17 +142,17 @@ Tag.propTypes = {
   /**
    * Click handler for filter tag close button.
    */
-  onClose: PropTypes.func,
+  onClose: deprecate(PropTypes.func, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Optional prop to render a custom icon.
    * Can be a React component class
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
-   * Specify the size of the Tag. Currently supports either `sm` or
-   * 'md' (default) sizes.
+   * Specify the size of the Tag. Currently supports either `sm`,
+   * `md` (default) or `lg` sizes.
    */
-  size: PropTypes.oneOf(['sm', 'md']),
+  size: PropTypes.oneOf(Object.keys(SIZES)),
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
    */
@@ -151,12 +160,11 @@ Tag.propTypes = {
   /**
    * Text to show on clear filters
    */
-  title: PropTypes.string,
+  title: deprecate(PropTypes.string, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the type of the `Tag`
    */
   type: PropTypes.oneOf(Object.keys(TYPES))
 };
-const types = Object.keys(TYPES);
 
-export { Tag as default, types };
+export { SIZES, TYPES, Tag as default };

package/es/components/Tag/index.d.ts

@@ -6,6 +6,5 @@
  */
 import Tag from './Tag';
 export * from './Tag.Skeleton';
-export * from './Tag';
 export default Tag;
 export { Tag };

package/es/components/Toggle/Toggle.js

@@ -65,6 +65,7 @@ function Toggle(_ref) {
   const switchClasses = cx(`${prefix}--toggle__switch`, {
     [`${prefix}--toggle__switch--checked`]: checked
   });
+  const labelId = `${id}_label`;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -88,10 +89,11 @@ function Toggle(_ref) {
       role: "switch",
       type: "button",
       "aria-checked": checked,
-      "aria-labelledby": id,
+      "aria-labelledby": ariaLabelledby ?? labelId,
       disabled: disabled,
       onClick: handleClick
     })), /*#__PURE__*/React__default.createElement(LabelComponent, {
+      id: labelId,
       htmlFor: ariaLabelledby ? undefined : id,
       className: `${prefix}--toggle__label`
     }, labelText && /*#__PURE__*/React__default.createElement(Text, {

package/es/components/Toggletip/index.d.ts

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import { type ElementType, type ReactNode } from 'react';
+import React, { type ElementType, type ReactNode } from 'react';
 import { type PopoverAlignment } from '../Popover';
+import { PolymorphicProps } from '../../types/common';
 type ToggletipLabelProps<E extends ElementType> = {
     as?: E | undefined;
     children?: ReactNode;
@@ -78,16 +79,17 @@ export declare namespace Toggletip {
         defaultOpen: PropTypes.Requireable<boolean>;
     };
 }
-interface ToggletipButtonProps {
+interface ToggletipButtonBaseProps {
     children?: ReactNode;
     className?: string | undefined;
     label?: string | undefined;
 }
+export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps<T, ToggletipButtonBaseProps>;
 /**
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-export declare function ToggletipButton({ children, className: customClassName, label, }: ToggletipButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToggletipButton<T extends React.ElementType>({ children, className: customClassName, label, as: BaseComponent, ...rest }: ToggleTipButtonProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ToggletipButton {
     var propTypes: {
         /**

package/es/components/Toggletip/index.js

@@ -92,6 +92,9 @@ function Toggletip(_ref2) {
     },
     contentProps: {
       id
+    },
+    onClick: {
+      onClick: actions.toggle
     }
   };
   const onKeyDown = event => {
@@ -179,16 +182,24 @@ function ToggletipButton(_ref3) {
   let {
     children,
     className: customClassName,
-    label = 'Show information'
+    label = 'Show information',
+    as: BaseComponent,
+    ...rest
   } = _ref3;
   const toggletip = useToggletip();
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-button`, customClassName);
+  const ComponentToggle = BaseComponent ?? 'button';
+  if (ComponentToggle !== 'button') {
+    return /*#__PURE__*/React__default.createElement(ComponentToggle, _extends({}, toggletip?.onClick, {
+      className: className
+    }, rest), children);
+  }
   return /*#__PURE__*/React__default.createElement("button", _extends({}, toggletip?.buttonProps, {
     "aria-label": label,
     type: "button",
     className: className
-  }), children);
+  }, rest), children);
 }
 ToggletipButton.propTypes = {
   /**

package/es/components/Tooltip/DefinitionTooltip.js

@@ -49,6 +49,9 @@ const DefinitionTooltip = _ref => {
     onMouseEnter: () => {
       openOnHover ? setOpen(true) : null;
     },
+    onFocus: () => {
+      setOpen(true);
+    },
     open: isOpen
   }, /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
     className: cx(`${prefix}--definition-term`, triggerClassName),

package/es/feature-flags.js

@@ -11,5 +11,6 @@ FeatureFlags.merge({
   'enable-css-custom-properties': true,
   'enable-css-grid': true,
   'enable-v11-release': true,
-  'enable-experimental-tile-contrast': false
+  'enable-experimental-tile-contrast': false,
+  'enable-v12-tile-radio-icons': false
 });

package/es/index.js

@@ -25,6 +25,8 @@ export { default as ComposedModal, ModalBody } from './components/ComposedModal/
 export { ModalHeader } from './components/ComposedModal/ModalHeader.js';
 export { ModalFooter } from './components/ComposedModal/ModalFooter.js';
 export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
+export { default as Copy } from './components/Copy/Copy.js';
+export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as DangerButton } from './components/DangerButton/DangerButton.js';
 import './components/DataTable/index.js';
 export { default as DataTableSkeleton } from './components/DataTableSkeleton/DataTableSkeleton.js';
@@ -97,7 +99,7 @@ export { default as IconSwitch } from './components/Switch/IconSwitch.js';
 export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
 export { default as TabContent } from './components/TabContent/TabContent.js';
 export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
-export { default as Tag, types } from './components/Tag/Tag.js';
+export { default as Tag } from './components/Tag/Tag.js';
 export { default as TagSkeleton } from './components/Tag/Tag.Skeleton.js';
 export { default as TextArea } from './components/TextArea/TextArea.js';
 export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
@@ -169,8 +171,6 @@ export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet.js'
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as useContextMenu } from './components/ContextMenu/useContextMenu.js';
-export { default as Copy } from './components/Copy/Copy.js';
-export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';

package/es/internal/Selection.js

@@ -6,7 +6,7 @@
  */
 
 import { defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash.isequal';
 
@@ -39,7 +39,16 @@ function useSelection(_ref2) {
   const savedOnChange = useRef(onChange);
   const [uncontrolledItems, setUncontrolledItems] = useState(initialSelectedItems);
   const isControlled = !!controlledItems;
-  const selectedItems = isControlled ? controlledItems : uncontrolledItems;
+  const [selectedItems, setSelectedItems] = useState(isControlled ? controlledItems : uncontrolledItems);
+  useEffect(() => {
+    callOnChangeHandler({
+      isControlled,
+      isMounted: isMounted.current,
+      onChangeHandlerControlled: savedOnChange.current,
+      onChangeHandlerUncontrolled: setUncontrolledItems,
+      selectedItems: selectedItems
+    });
+  }, [isControlled, isMounted, selectedItems]);
   const onItemChange = useCallback(item => {
     if (disabled) {
       return;
@@ -50,27 +59,12 @@ function useSelection(_ref2) {
         selectedIndex = index;
       }
     });
-    let newSelectedItems;
     if (selectedIndex === undefined) {
-      newSelectedItems = selectedItems.concat(item);
-      callOnChangeHandler({
-        isControlled,
-        isMounted: isMounted.current,
-        onChangeHandlerControlled: savedOnChange.current,
-        onChangeHandlerUncontrolled: setUncontrolledItems,
-        selectedItems: newSelectedItems
-      });
+      setSelectedItems(selectedItems => selectedItems.concat(item));
       return;
     }
-    newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
-    callOnChangeHandler({
-      isControlled,
-      isMounted: isMounted.current,
-      onChangeHandlerControlled: savedOnChange.current,
-      onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: newSelectedItems
-    });
-  }, [disabled, isControlled, selectedItems]);
+    setSelectedItems(selectedItems => removeAtIndex(selectedItems, selectedIndex));
+  }, [disabled, selectedItems]);
   const clearSelection = useCallback(() => {
     if (disabled) {
       return;
@@ -80,7 +74,7 @@ function useSelection(_ref2) {
       isMounted: isMounted.current,
       onChangeHandlerControlled: savedOnChange.current,
       onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: []
+      selectedItems: setSelectedItems([])
     });
   }, [disabled, isControlled]);
   useEffect(() => {

package/lib/components/Accordion/AccordionItem.js

@@ -55,7 +55,7 @@ function AccordionItem(_ref) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
     [`${prefix}--accordion__item`]: true,
-    [`${prefix}--accordion__item--active`]: isOpen,
+    [`${prefix}--accordion__item--active`]: isOpen && !disabled,
     [`${prefix}--accordion__item--disabled`]: disabled,
     [customClassName]: !!customClassName
   });

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -36,7 +36,7 @@ const rowHeightInPixels = 16;
 const defaultMaxCollapsedNumberOfRows = 15;
 const defaultMaxExpandedNumberOfRows = 0;
 const defaultMinCollapsedNumberOfRows = 3;
-const defaultMinExpandedNumberOfRows = 16;
+const defaultMinExpandedNumberOfRows = 0;
 function CodeSnippet(_ref) {
   let {
     align = 'bottom',
@@ -113,7 +113,7 @@ function CodeSnippet(_ref) {
       if (codeContentRef?.current && type === 'multi') {
         const {
           height
-        } = codeContentRef.current.getBoundingClientRect();
+        } = innerCodeRef.current.getBoundingClientRect();
         if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
           setShouldShowMoreLessBtn(true);
         } else {

package/lib/components/Copy/Copy.d.ts

@@ -0,0 +1,74 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React, { AnimationEventHandler, MouseEventHandler, PropsWithChildren } from 'react';
+interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    /**
+     * Specify an optional className to be applied to the underlying `<button>`
+     */
+    className?: string;
+    /**
+     * Specify the string that is displayed when the button is clicked and the
+     * content is copied
+     */
+    feedback?: string;
+    /**
+     * Specify the time it takes for the feedback message to timeout
+     */
+    feedbackTimeout?: number;
+    /**
+     * Specify an optional `onAnimationEnd` handler that is called when the underlying
+     * animation ends
+     */
+    onAnimationEnd?: AnimationEventHandler<HTMLButtonElement>;
+    /**
+     * Specify an optional `onClick` handler that is called when the underlying
+     * `<button>` is clicked
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+declare function Copy({ align, children, className, feedback, feedbackTimeout, onAnimationEnd, onClick, ...other }: PropsWithChildren<CopyProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Copy {
+    var propTypes: {
+        /**
+         * Specify how the trigger should align with the tooltip
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Pass in content to be rendered in the underlying `<button>`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the underlying `<button>`
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the string that is displayed when the button is clicked and the
+         * content is copied
+         */
+        feedback: PropTypes.Requireable<string>;
+        /**
+         * Specify the time it takes for the feedback message to timeout
+         */
+        feedbackTimeout: PropTypes.Requireable<number>;
+        /**
+         * Specify an optional `onAnimationEnd` handler that is called when the underlying
+         * animation ends
+         */
+        onAnimationEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify an optional `onClick` handler that is called when the underlying
+         * `<button>` is clicked
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default Copy;

package/lib/components/Copy/Copy.js

@@ -68,7 +68,7 @@ function Copy(_ref) {
     onClick: events.composeEventHandlers([onClick, handleClick]),
     onAnimationEnd: events.composeEventHandlers([onAnimationEnd, handleAnimationEnd])
   }, other, {
-    "aria-label": !children && (animation ? feedback : other['aria-label']) || null
+    "aria-label": !children && (animation ? feedback : other['aria-label']) || undefined
   }), children);
 }
 Copy.propTypes = {

package/lib/components/Copy/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 Copy from './Copy';
+export default Copy;
+export { Copy };