@carbon/react 1.54.0-rc.0 → 1.55.0-rc.0

package/es/components/Tag/OperationalTag.js

@@ -0,0 +1,99 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import Tag, { SIZES } from './Tag.js';
+
+const getInstanceId = setupGetInstanceId();
+const TYPES = {
+  red: 'Red',
+  magenta: 'Magenta',
+  purple: 'Purple',
+  blue: 'Blue',
+  cyan: 'Cyan',
+  teal: 'Teal',
+  green: 'Green',
+  gray: 'Gray',
+  'cool-gray': 'Cool-Gray',
+  'warm-gray': 'Warm-Gray'
+};
+const OperationalTag = _ref => {
+  let {
+    children,
+    className,
+    disabled,
+    id,
+    renderIcon,
+    slug,
+    size,
+    type = 'gray',
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const tagId = id || `tag-${getInstanceId()}`;
+  const tagClasses = cx(`${prefix}--tag--operational`, className);
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'sm',
+      kind: 'inline'
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    type: type,
+    size: size,
+    renderIcon: renderIcon,
+    disabled: disabled,
+    className: tagClasses,
+    id: tagId
+  }, other), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--interactive--tag-children`
+  }, children, normalizedSlug));
+};
+OperationalTag.propTypes = {
+  /**
+   * Provide content to be rendered inside of a `OperationalTag`
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom className that is applied to the containing <span>
+   */
+  className: PropTypes.string,
+  /**
+   * Specify if the `OperationalTag` is disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Specify the id for the tag.
+   */
+  id: PropTypes.string,
+  /**
+   * 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`,
+   * `md` (default) or `lg` sizes.
+   */
+  size: PropTypes.oneOf(Object.keys(SIZES)),
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
+   */
+  slug: PropTypes.node,
+  /**
+   * Specify the type of the `Tag`
+   */
+  type: PropTypes.oneOf(Object.keys(TYPES))
+};
+
+export { OperationalTag as default };

package/es/components/Tag/SelectableTag.js

@@ -0,0 +1,98 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { useState } from 'react';
+import cx from 'classnames';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import Tag, { SIZES } from './Tag.js';
+
+const getInstanceId = setupGetInstanceId();
+const SelectableTag = _ref => {
+  let {
+    children,
+    className,
+    disabled,
+    id,
+    renderIcon,
+    selected = false,
+    slug,
+    size,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const tagId = id || `tag-${getInstanceId()}`;
+  const [selectedTag, setSelectedTag] = useState(selected);
+  const tagClasses = cx(`${prefix}--tag--selectable`, className, {
+    [`${prefix}--tag--selectable-selected`]: selectedTag
+  });
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'sm',
+      kind: 'inline'
+    });
+  }
+
+  // Removing onClick from the spread operator
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {
+    onClick,
+    ...otherProps
+  } = other;
+  return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    slug: slug,
+    size: size,
+    renderIcon: renderIcon,
+    disabled: disabled,
+    className: tagClasses,
+    id: tagId,
+    onClick: () => setSelectedTag(!selectedTag)
+  }, otherProps), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--interactive--tag-children`
+  }, children, normalizedSlug));
+};
+SelectableTag.propTypes = {
+  /**
+   * Provide content to be rendered inside of a `SelectableTag`
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom className that is applied to the containing <span>
+   */
+  className: PropTypes.string,
+  /**
+   * Specify if the `SelectableTag` is disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Specify the id for the tag.
+   */
+  id: PropTypes.string,
+  /**
+   * Optional prop to render a custom icon.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Specify the state of the selectable tag.
+   */
+  selected: PropTypes.bool,
+  /**
+   * Specify the size of the Tag. Currently supports either `sm`,
+   * `md` (default) or `lg` sizes.
+   */
+  size: PropTypes.oneOf(Object.keys(SIZES)),
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
+   */
+  slug: PropTypes.node
+};
+
+export { SelectableTag as default };

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

@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Tag from './Tag';
+import DismissibleTag from './DismissibleTag';
+import OperationalTag from './OperationalTag';
+import SelectableTag from './SelectableTag';
 export * from './Tag.Skeleton';
 export default Tag;
-export { Tag };
+export { Tag, DismissibleTag, OperationalTag, SelectableTag };

package/es/components/TreeView/TreeNode.js

@@ -56,7 +56,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       return /*#__PURE__*/React__default.cloneElement(node, {
         active,
         depth: depth + 1,
-        disabled,
+        disabled: disabled || node.props.disabled,
         onTreeSelect,
         selected,
         tabIndex: !node.props.disabled && -1 || null

package/es/components/UIShell/SideNavMenu.js

@@ -28,9 +28,12 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     tabIndex,
     title
   } = _ref;
-  const isRail = useContext(SideNavContext);
+  const {
+    isRail
+  } = useContext(SideNavContext);
   const prefix = usePrefix();
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [prevExpanded, setPrevExpanded] = useState(defaultExpanded);
   const className = cx({
     [`${prefix}--side-nav__item`]: true,
     [`${prefix}--side-nav__item--active`]: isActive || hasActiveDescendant(children) && !isExpanded,
@@ -38,6 +41,13 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     [`${prefix}--side-nav__item--large`]: large,
     [customClassName]: !!customClassName
   });
+  if (!isSideNavExpanded && isExpanded && isRail) {
+    setIsExpanded(false);
+    setPrevExpanded(true);
+  } else if (isSideNavExpanded && prevExpanded && isRail) {
+    setIsExpanded(true);
+    setPrevExpanded(false);
+  }
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions

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

@@ -20,6 +20,10 @@ interface SideNavMenuItemProps extends HTMLAttributes<HTMLElement> {
      * `aria-current="page"`, as well.
      */
     isActive?: boolean;
+    /**
+     * Optionally provide an href for the underlying li`
+     */
+    href?: string;
 }
 declare const SideNavMenuItem: React.ForwardRefExoticComponent<SideNavMenuItemProps & React.RefAttributes<HTMLElement>>;
 export default SideNavMenuItem;

package/es/components/UIShell/SideNavMenuItem.js

@@ -19,6 +19,7 @@ const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavM
     children,
     className: customClassName,
     isActive,
+    href,
     ...rest
   } = props;
   const className = cx(`${prefix}--side-nav__menu-item`, customClassName);
@@ -28,7 +29,9 @@ const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavM
   });
   return /*#__PURE__*/React__default.createElement("li", {
     className: className
-  }, /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(Link, _extends({
+    href: href
+  }, rest, {
     className: linkClassName,
     ref: ref
   }), /*#__PURE__*/React__default.createElement(SideNavLinkText, null, children)));
@@ -43,6 +46,10 @@ SideNavMenuItem.propTypes = {
    * Provide an optional class to be applied to the containing node
    */
   className: PropTypes.string,
+  /**
+   * Optionally provide an href for the underlying li`
+   */
+  href: PropTypes.string,
   /**
    * Optionally specify whether the link is "active". An active link is one that
    * has an href that is the same as the current page. Can also pass in

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

@@ -39,6 +39,10 @@ interface BaseSwitcherItemProps {
      * Specify whether the panel is selected
      */
     isSelected?: boolean;
+    /**
+     * Optionally provide an href for the underlying li`
+     */
+    href?: string;
 }
 interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
     'aria-label': string;

package/es/components/UIShell/SwitcherItem.js

@@ -27,6 +27,7 @@ const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwar
     index,
     handleSwitcherItemFocus,
     onKeyDown = () => {},
+    href,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -63,6 +64,7 @@ const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwar
       setTabFocus(evt);
       onKeyDown(evt);
     },
+    href: href,
     ref: forwardRef
   }, rest, {
     className: linkClassName,
@@ -84,6 +86,10 @@ SwitcherItem.propTypes = {
    * event handlers
    */
   handleSwitcherItemFocus: PropTypes.func,
+  /**
+   * Optionally provide an href for the underlying li`
+   */
+  href: PropTypes.string,
   /**
    * Specify the index of the SwitcherItem
    */

package/es/feature-flags.js

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

package/es/index.js

@@ -19,6 +19,8 @@ export { default as ButtonSet } from './components/ButtonSet/ButtonSet.js';
 export { default as Checkbox } from './components/Checkbox/Checkbox.js';
 export { default as CheckboxSkeleton } from './components/Checkbox/Checkbox.Skeleton.js';
 export { ClassPrefix } from './components/ClassPrefix/index.js';
+export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet.js';
+export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSnippet.Skeleton.js';
 export { default as ComboBox } from './components/ComboBox/ComboBox.js';
 export { ComboButton } from './components/ComboButton/index.js';
 export { default as ComposedModal, ModalBody } from './components/ComposedModal/ComposedModal.js';
@@ -105,6 +107,9 @@ export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs } from './components/T
 export { default as TabContent } from './components/TabContent/TabContent.js';
 export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as Tag } from './components/Tag/Tag.js';
+export { default as DismissibleTag } from './components/Tag/DismissibleTag.js';
+export { default as OperationalTag } from './components/Tag/OperationalTag.js';
+export { default as SelectableTag } from './components/Tag/SelectableTag.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';
@@ -173,8 +178,6 @@ export { default as unstable__FluidTextInputSkeleton } from './components/FluidT
 export { default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as CheckboxGroup } from './components/CheckboxGroup/CheckboxGroup.js';
-export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSnippet.Skeleton.js';
-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';

package/es/internal/environment.js

@@ -10,6 +10,10 @@
  *
  * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
  */
-const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+const canUseDOM = !!(typeof window !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+window.document &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+window.document.createElement);
 
 export { canUseDOM };

package/es/internal/keyboard/navigation.js

@@ -39,7 +39,9 @@ const getNextIndex = (key, index, arrayLength) => {
  */
 const DOCUMENT_POSITION_BROAD_PRECEDING =
 // Checks `typeof Node` for `react-docgen`
-typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
 
 /**
  * A flag `node.compareDocumentPosition(target)` returns,
@@ -47,7 +49,9 @@ typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_
  */
 const DOCUMENT_POSITION_BROAD_FOLLOWING =
 // Checks `typeof Node` for `react-docgen`
-typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
 
 /**
  * CSS selector that selects major nodes that are sequential-focusable.

package/es/internal/useOutsideClick.js

@@ -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 { useRef, useEffect } from 'react';
+import { useEvent } from './useEvent.js';
+import { canUseDOM } from './environment.js';
+
+function useOutsideClick(ref, callback) {
+  const savedCallback = useRef(callback);
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+
+  // We conditionally guard the `useEvent` hook for SSR. `canUseDOM` can be
+  // treated as a constant as it will be false when executed in a Node.js
+  // environment and true when executed in the browser
+  if (canUseDOM) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEvent(window, 'click', event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        savedCallback.current(event);
+      }
+    });
+  }
+}
+
+export { useOutsideClick };

package/lib/components/Button/Button.d.ts

@@ -14,7 +14,7 @@ export declare const ButtonTooltipAlignments: readonly ["start", "center", "end"
 export type ButtonTooltipAlignment = (typeof ButtonTooltipAlignments)[number];
 export declare const ButtonTooltipPositions: string[];
 export type ButtonTooltipPosition = (typeof ButtonTooltipPositions)[number];
-interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Specify the message read by screen readers for the danger button variant
      */

package/lib/components/Button/Button.js

@@ -12,17 +12,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
-var cx = require('classnames');
 var index = require('../IconButton/index.js');
 var events = require('../../tools/events.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var useId = require('../../internal/useId.js');
+var ButtonBase = require('./ButtonBase.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const ButtonKinds = ['primary', 'secondary', 'danger', 'ghost', 'danger--primary', 'danger--ghost', 'danger--tertiary', 'tertiary'];
 const ButtonSizes = ['sm', 'md', 'lg', 'xl', '2xl'];
@@ -34,18 +31,13 @@ function isIconOnlyButton(hasIconOnly, _kind) {
   }
   return false;
 }
-const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(_ref, ref) {
-  let {
+const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(props, ref) {
+  const tooltipRef = React.useRef(null);
+  const {
     as,
     children,
-    className,
-    dangerDescription = 'danger',
-    disabled = false,
     hasIconOnly = false,
-    href,
     iconDescription,
-    isExpressive = false,
-    isSelected,
     kind = 'primary',
     onBlur,
     onClick,
@@ -54,92 +46,21 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     onMouseLeave,
     renderIcon: ButtonImageElement,
     size,
-    tabIndex,
     tooltipAlignment = 'center',
     tooltipPosition = 'top',
-    type = 'button',
     ...rest
-  } = _ref;
-  const tooltipRef = React.useRef(null);
-  const prefix = usePrefix.usePrefix();
+  } = props;
   const handleClick = evt => {
     // Prevent clicks on the tooltip from triggering the button click event
     if (evt.target === tooltipRef.current) {
       evt.preventDefault();
     }
   };
-  const buttonClasses = cx__default["default"](className, {
-    [`${prefix}--btn`]: true,
-    [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--xl`]: size === 'xl',
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--2xl`]: size === '2xl',
-    // TODO: V12 - Remove this class
-    [`${prefix}--layout--size-${size}`]: size,
-    [`${prefix}--btn--${kind}`]: kind,
-    [`${prefix}--btn--disabled`]: disabled,
-    [`${prefix}--btn--expressive`]: isExpressive,
-    [`${prefix}--btn--icon-only`]: hasIconOnly,
-    [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost'
-  });
-  const commonProps = {
-    tabIndex,
-    className: buttonClasses,
-    ref
-  };
-  const buttonImage = !ButtonImageElement ? null : /*#__PURE__*/React__default["default"].createElement(ButtonImageElement, {
-    "aria-label": iconDescription,
-    className: `${prefix}--btn__icon`,
-    "aria-hidden": "true"
-  });
   const iconOnlyImage = !ButtonImageElement ? null : /*#__PURE__*/React__default["default"].createElement(ButtonImageElement, null);
-  const dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
-  let component = 'button';
-  const assistiveId = useId.useId('danger-description');
-  const {
-    'aria-pressed': ariaPressed,
-    'aria-describedby': ariaDescribedBy
-  } = rest;
-  let otherProps = {
-    disabled,
-    type,
-    'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || undefined,
-    'aria-pressed': ariaPressed ?? (hasIconOnly && kind === 'ghost' ? isSelected : undefined)
-  };
-  const anchorProps = {
-    href
-  };
-  let assistiveText = null;
-  if (dangerButtonVariants.includes(kind)) {
-    assistiveText = /*#__PURE__*/React__default["default"].createElement("span", {
-      id: assistiveId,
-      className: `${prefix}--visually-hidden`
-    }, dangerDescription);
-  }
-  if (as) {
-    component = as;
-    otherProps = {
-      ...otherProps,
-      ...anchorProps
-    };
-  } else if (href && !disabled) {
-    component = 'a';
-    otherProps = anchorProps;
-  }
   if (!isIconOnlyButton(hasIconOnly)) {
-    return /*#__PURE__*/React__default["default"].createElement(component, {
-      onMouseEnter,
-      onMouseLeave,
-      onFocus,
-      onBlur,
-      onClick,
-      ...rest,
-      ...commonProps,
-      ...otherProps
-    }, assistiveText, children, buttonImage);
+    return /*#__PURE__*/React__default["default"].createElement(ButtonBase["default"], _rollupPluginBabelHelpers["extends"]({
+      ref: ref
+    }, props));
   } else {
     let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
@@ -156,7 +77,8 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     if (tooltipPosition === 'right' || tooltipPosition === 'left') {
       align = tooltipPosition;
     }
-    return /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, rest, {
+      ref: ref,
       as: as,
       align: align,
       label: iconDescription,
@@ -166,8 +88,9 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
       onBlur: onBlur,
-      onClick: events.composeEventHandlers([onClick, handleClick])
-    }, rest, commonProps, otherProps), iconOnlyImage ?? children);
+      onClick: events.composeEventHandlers([onClick, handleClick]),
+      renderIcon: iconOnlyImage ? null : ButtonImageElement // avoid doubling the icon.
+    }), iconOnlyImage ?? children);
   }
 });
 Button.displayName = 'Button';

package/lib/components/Button/ButtonBase.d.ts

@@ -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.
+ */
+import React from 'react';
+import { ButtonProps } from './Button';
+declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+export default ButtonBase;