@carbon/react 1.103.0 → 1.104.0

package/es/components/Button/Button.Skeleton.js

@@ -1,69 +1,60 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 from 'react';
-import cx from 'classnames';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const ButtonSkeleton = ({
-  className,
-  small = false,
-  href,
-  size = 'lg',
-  ...rest
-}) => {
-  const prefix = usePrefix();
-  const buttonClasses = cx(className, {
-    [`${prefix}--skeleton`]: true,
-    [`${prefix}--btn`]: true,
-    [`${prefix}--btn--xs`]: size === 'xs',
-    [`${prefix}--btn--sm`]: small || size === 'sm',
-    [`${prefix}--btn--md`]: size === 'md',
-    [`${prefix}--btn--lg`]: size === 'lg',
-    [`${prefix}--btn--xl`]: size === 'xl',
-    [`${prefix}--btn--2xl`]: size === '2xl',
-    [`${prefix}--layout--size-${size}`]: size
-  });
-  const commonProps = {
-    className: buttonClasses,
-    ...rest
-  };
-  const button = /*#__PURE__*/React.createElement("div", commonProps);
-  const anchor = /*#__PURE__*/React.createElement("a", _extends({}, commonProps, {
-    href: href,
-    role: "button"
-  })); // eslint-disable-line
-
-  return href ? anchor : button;
+//#region src/components/Button/Button.Skeleton.tsx
+/**
+* Copyright IBM Corp. 2016, 2025
+*
+* 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 ButtonSkeleton = ({ className, small = false, href, size = "lg", ...rest }) => {
+	const prefix = usePrefix();
+	const commonProps = {
+		className: classNames(className, {
+			[`${prefix}--skeleton`]: true,
+			[`${prefix}--btn`]: true,
+			[`${prefix}--btn--xs`]: size === "xs",
+			[`${prefix}--btn--sm`]: small || size === "sm",
+			[`${prefix}--btn--md`]: size === "md",
+			[`${prefix}--btn--lg`]: size === "lg",
+			[`${prefix}--btn--xl`]: size === "xl",
+			[`${prefix}--btn--2xl`]: size === "2xl",
+			[`${prefix}--layout--size-${size}`]: size
+		}),
+		...rest
+	};
+	const button = /* @__PURE__ */ jsx("div", { ...commonProps });
+	const anchor = /* @__PURE__ */ jsx("a", {
+		...commonProps,
+		href,
+		role: "button"
+	});
+	return href ? anchor : button;
 };
 ButtonSkeleton.propTypes = {
-  /**
-   * Specify an optional className to add.
-   */
-  className: PropTypes.string,
-  /**
-   * Optionally specify an href for your Button to become an `<a>` element
-   */
-  href: PropTypes.string,
-  /**
-   * Specify the size of the button, from a list of available sizes.
-   * For `default` buttons, this prop can remain unspecified or use `default`.
-   * In the next major release of Carbon, `default`, `field`, and `small` will be removed
-   */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']),
-  /**
-   * @deprecated This property will be removed in the next major Carbon version,
-   * use size={sm} instead.
-   *
-   * Specify whether the Button should be a small variant
-   */
-  small: PropTypes.bool
+	className: PropTypes.string,
+	href: PropTypes.string,
+	size: PropTypes.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg",
+		"xl",
+		"2xl"
+	]),
+	small: PropTypes.bool
 };
 
-export { ButtonSkeleton, ButtonSkeleton as default };
+//#endregion
+export { ButtonSkeleton as default };

package/es/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/Button/Button.js

@@ -1,253 +1,159 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 from 'react';
-import { IconButtonKinds, IconButton } from '../IconButton/index.js';
-import ButtonBase from './ButtonBase.js';
+import ButtonBase from "./ButtonBase.js";
+import { IconButton, IconButtonKinds } from "../IconButton/index.js";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const ButtonKinds = ['primary', 'secondary', 'danger', 'ghost', 'danger--primary', 'danger--ghost', 'danger--tertiary', 'tertiary'];
-const ButtonSizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
-const ButtonTooltipAlignments = ['start', 'center', 'end'];
-const ButtonTooltipPositions = ['top', 'right', 'bottom', 'left'];
+//#region src/components/Button/Button.tsx
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* 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 ButtonKinds = [
+	"primary",
+	"secondary",
+	"danger",
+	"ghost",
+	"danger--primary",
+	"danger--ghost",
+	"danger--tertiary",
+	"tertiary"
+];
+const ButtonSizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+];
+const ButtonTooltipAlignments = [
+	"start",
+	"center",
+	"end"
+];
+const ButtonTooltipPositions = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
 function isIconOnlyButton(hasIconOnly, _kind) {
-  if (hasIconOnly === true) {
-    return true;
-  }
-  return false;
+	if (hasIconOnly === true) return true;
+	return false;
 }
-const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    as,
-    autoAlign = false,
-    children,
-    hasIconOnly = false,
-    tooltipHighContrast = true,
-    tooltipDropShadow = false,
-    iconDescription,
-    kind = 'primary',
-    onBlur,
-    onClick,
-    onFocus,
-    onMouseEnter,
-    onMouseLeave,
-    renderIcon: ButtonImageElement,
-    size,
-    tooltipAlignment = 'center',
-    tooltipPosition = 'top',
-    ...rest
-  } = props;
-  if (ButtonImageElement && !children && !iconDescription) {
-    // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
-    console.error('Button: renderIcon property specified without also providing an iconDescription property. ' + 'This may impact accessibility for screen reader users.');
-  }
-  const iconOnlyImage = !ButtonImageElement ? null : /*#__PURE__*/React.createElement(ButtonImageElement, null);
-  if (!isIconOnlyButton(hasIconOnly)) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const {
-      tooltipAlignment,
-      ...propsWithoutTooltipAlignment
-    } = props;
-    return /*#__PURE__*/React.createElement(ButtonBase, _extends({
-      ref: ref
-    }, propsWithoutTooltipAlignment));
-  } else {
-    let align = undefined;
-    if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
-      if (tooltipAlignment === 'center') {
-        align = tooltipPosition;
-      }
-      if (tooltipAlignment === 'end') {
-        align = `${tooltipPosition}-end`;
-      }
-      if (tooltipAlignment === 'start') {
-        align = `${tooltipPosition}-start`;
-      }
-    }
-    if (tooltipPosition === 'right' || tooltipPosition === 'left') {
-      align = tooltipPosition;
-    }
-    return (
-      /*#__PURE__*/
-      // @ts-expect-error - `IconButton` does not support all `size`s that
-      // `Button` supports.
-      //
-      // TODO: What should be done here?
-      // 1. Should the `IconButton` not be rendered if the `size` is not
-      //    supported?
-      // 2. Should an error be thrown?
-      // 3. Something else?
-      React.createElement(IconButton, _extends({}, rest, {
-        ref: ref,
-        as: as,
-        align: align,
-        label: iconDescription,
-        kind: kind,
-        size: size,
-        highContrast: tooltipHighContrast,
-        dropShadow: tooltipDropShadow,
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        autoAlign: autoAlign,
-        onClick: onClick,
-        renderIcon: iconOnlyImage ? null : ButtonImageElement // avoid doubling the icon.
-      }), iconOnlyImage ?? children)
-    );
-  }
+const Button = React.forwardRef((props, ref) => {
+	const { as, autoAlign = false, children, hasIconOnly = false, tooltipHighContrast = true, tooltipDropShadow = false, iconDescription, kind = "primary", onBlur, onClick, onFocus, onMouseEnter, onMouseLeave, renderIcon: ButtonImageElement, size, tooltipAlignment = "center", tooltipPosition = "top", ...rest } = props;
+	if (ButtonImageElement && !children && !iconDescription) console.error("Button: renderIcon property specified without also providing an iconDescription property. This may impact accessibility for screen reader users.");
+	const iconOnlyImage = !ButtonImageElement ? null : /* @__PURE__ */ jsx(ButtonImageElement, {});
+	if (!isIconOnlyButton(hasIconOnly, kind)) {
+		const { tooltipAlignment, ...propsWithoutTooltipAlignment } = props;
+		return /* @__PURE__ */ jsx(ButtonBase, {
+			ref,
+			...propsWithoutTooltipAlignment
+		});
+	} else {
+		let align = void 0;
+		if (tooltipPosition === "top" || tooltipPosition === "bottom") {
+			if (tooltipAlignment === "center") align = tooltipPosition;
+			if (tooltipAlignment === "end") align = `${tooltipPosition}-end`;
+			if (tooltipAlignment === "start") align = `${tooltipPosition}-start`;
+		}
+		if (tooltipPosition === "right" || tooltipPosition === "left") align = tooltipPosition;
+		return /* @__PURE__ */ jsx(IconButton, {
+			...rest,
+			ref,
+			as,
+			align,
+			label: iconDescription,
+			kind,
+			size,
+			highContrast: tooltipHighContrast,
+			dropShadow: tooltipDropShadow,
+			onMouseEnter,
+			onMouseLeave,
+			onFocus,
+			onBlur,
+			autoAlign,
+			onClick,
+			renderIcon: iconOnlyImage ? null : ButtonImageElement,
+			children: iconOnlyImage ?? children
+		});
+	}
 });
-
-// @ts-expect-error - `displayName` isn't typed.
-Button.displayName = 'Button';
-// @ts-expect-error - `propTypes` isn't typed.
+Button.displayName = "Button";
 Button.propTypes = {
-  /**
-   * Specify how the button itself should be rendered.
-   * Make sure to apply all props to the root node and render children appropriately
-   */
-  as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
-  /**
-   * **Experimental**: Will attempt to automatically align the tooltip. Requires
-   * React v17+
-   * @see https://github.com/carbon-design-system/carbon/issues/18714
-   */
-  autoAlign: PropTypes.bool,
-  /**
-   * Specify the content of your Button
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be added to your Button
-   */
-  className: PropTypes.string,
-  /**
-   * Specify the message read by screen readers for the danger button variants
-   */
-  dangerDescription: PropTypes.string,
-  /**
-   * Specify whether the Button should be disabled, or not
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Specify if the button is an icon-only button
-   */
-  hasIconOnly: PropTypes.bool,
-  /**
-   * Optionally specify an href for your Button to become an `<a>` element
-   */
-  href: PropTypes.string,
-  /**
-   * If specifying the `renderIcon` prop, provide a description for that icon that can
-   * be read by screen readers
-   */
-  iconDescription: props => {
-    if (props.renderIcon && !props.children && !props.iconDescription) {
-      return new Error('renderIcon property specified without also providing an iconDescription property.');
-    }
-    return null;
-  },
-  /**
-   * Specify whether the Button is expressive, or not
-   */
-  isExpressive: PropTypes.bool,
-  /**
-   * Specify whether the Button is currently selected. Only applies to the icon only Ghost variant.
-   */
-  isSelected: PropTypes.bool,
-  /**
-   * Specify the kind of Button you want to create
-   */
-  kind: (props, propName, componentName) => {
-    const {
-      hasIconOnly
-    } = props;
-    const validKinds = hasIconOnly ? IconButtonKinds : ButtonKinds;
-    if (props[propName] === undefined) {
-      return null;
-    }
-    if (!validKinds.includes(props[propName])) {
-      return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. Expected one of ${validKinds.join(', ')}.`);
-    }
-    return null;
-  },
-  /**
-   * Provide an optional function to be called when the button element
-   * loses focus
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Provide an optional function to be called when the button element
-   * is clicked
-   */
-  onClick: PropTypes.func,
-  /**
-   * Provide an optional function to be called when the button element
-   * receives focus
-   */
-  onFocus: PropTypes.func,
-  /**
-   * Provide an optional function to be called when the mouse
-   * enters the button element
-   */
-  onMouseEnter: PropTypes.func,
-  /**
-   * Provide an optional function to be called when the mouse
-   * leaves the button element
-   */
-  onMouseLeave: PropTypes.func,
-  /**
-   * Optionally specify a `rel` when using an `<a>` element.
-   */
-  rel: PropTypes.string,
-  /**
-   * A component used to render an icon.
-   */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  /**
-   * Optional prop to specify the role of the Button
-   */
-  role: PropTypes.string,
-  /**
-   * Specify the size of the button, from the following list of sizes:
-   */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']),
-  /**
-   * Optional prop to specify the tabIndex of the Button
-   */
-  tabIndex: PropTypes.number,
-  /**
-   * Optionally specify a `target` when using an `<a>` element.
-   */
-  target: PropTypes.string,
-  /**
-   * Specify the alignment of the tooltip to the icon-only button.
-   * Can be one of: `start`, `center`, or `end`.
-   */
-  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
-  /**
-   * Enable drop shadow for tooltips for icon-only buttons.
-   */
-  tooltipDropShadow: PropTypes.bool,
-  /**
-   * Enable high-contrast theme for tooltips for icon-only buttons.
-   * Defaults to true.
-   */
-  tooltipHighContrast: PropTypes.bool,
-  /**
-   * Specify the direction of the tooltip for icon-only buttons.
-   * Can be either `top`, `right`, `bottom`, or `left`.
-   */
-  tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  /**
-   * Optional prop to specify the type of the Button
-   */
-  type: PropTypes.oneOf(['button', 'reset', 'submit'])
+	as: PropTypes.oneOfType([
+		PropTypes.func,
+		PropTypes.string,
+		PropTypes.elementType
+	]),
+	autoAlign: PropTypes.bool,
+	children: PropTypes.node,
+	className: PropTypes.string,
+	dangerDescription: PropTypes.string,
+	disabled: PropTypes.bool,
+	hasIconOnly: PropTypes.bool,
+	href: PropTypes.string,
+	iconDescription: (props) => {
+		if (props.renderIcon && !props.children && !props.iconDescription) return /* @__PURE__ */ new Error("renderIcon property specified without also providing an iconDescription property.");
+		return null;
+	},
+	isExpressive: PropTypes.bool,
+	isSelected: PropTypes.bool,
+	kind: (props, propName, componentName) => {
+		const { hasIconOnly } = props;
+		const validKinds = hasIconOnly ? IconButtonKinds : ButtonKinds;
+		if (props[propName] === void 0) return null;
+		if (!validKinds.includes(props[propName])) return /* @__PURE__ */ new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. Expected one of ${validKinds.join(", ")}.`);
+		return null;
+	},
+	onBlur: PropTypes.func,
+	onClick: PropTypes.func,
+	onFocus: PropTypes.func,
+	onMouseEnter: PropTypes.func,
+	onMouseLeave: PropTypes.func,
+	rel: PropTypes.string,
+	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	role: PropTypes.string,
+	size: PropTypes.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg",
+		"xl",
+		"2xl"
+	]),
+	tabIndex: PropTypes.number,
+	target: PropTypes.string,
+	tooltipAlignment: PropTypes.oneOf([
+		"start",
+		"center",
+		"end"
+	]),
+	tooltipDropShadow: PropTypes.bool,
+	tooltipHighContrast: PropTypes.bool,
+	tooltipPosition: PropTypes.oneOf([
+		"top",
+		"right",
+		"bottom",
+		"left"
+	]),
+	type: PropTypes.oneOf([
+		"button",
+		"reset",
+		"submit"
+	])
 };
 
-export { ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions, Button as default };
+//#endregion
+export { ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions, Button as default };