@carbon/react 1.103.0-rc.0 → 1.104.0-rc.0

package/es/components/Button/ButtonBase.js

@@ -1,113 +1,91 @@
 /**
- * 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 React from 'react';
-import cx from 'classnames';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { useId } from '../../internal/useId.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { useId } from "../../internal/useId.js";
+import classNames from "classnames";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
 
-const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase({
-  as,
-  children,
-  className,
-  dangerDescription = 'danger',
-  disabled = false,
-  hasIconOnly = false,
-  href,
-  iconDescription,
-  isExpressive = false,
-  isSelected,
-  kind = 'primary',
-  onBlur,
-  onClick,
-  onFocus,
-  onMouseEnter,
-  onMouseLeave,
-  renderIcon: ButtonImageElement,
-  size,
-  tabIndex,
-  type = 'button',
-  ...rest
-}, ref) {
-  const prefix = usePrefix();
-  const buttonClasses = cx(className, {
-    [`${prefix}--btn`]: true,
-    [`${prefix}--btn--xs`]: size === 'xs' && !isExpressive,
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
-    // TODO: V12 - Remove this class
-    [`${prefix}--btn--lg`]: size === 'lg' && !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.createElement(ButtonImageElement, {
-    "aria-label": iconDescription,
-    className: `${prefix}--btn__icon`,
-    "aria-hidden": "true"
-  });
-  const dangerButtonVariants = ['danger', 'danger--tertiary', 'danger--ghost'];
-  let component = 'button';
-  const assistiveId = 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.createElement("span", {
-      id: assistiveId,
-      className: `${prefix}--visually-hidden`
-    }, dangerDescription);
-  }
-  if (as) {
-    component = as;
-    otherProps = {
-      ...otherProps,
-      ...anchorProps
-    };
-  } else if (href && !disabled) {
-    component = 'a';
-    otherProps = anchorProps;
-  }
-  return /*#__PURE__*/React.createElement(component, {
-    onMouseEnter,
-    onMouseLeave,
-    onFocus,
-    onBlur,
-    onClick,
-    ...rest,
-    ...commonProps,
-    ...otherProps
-  }, assistiveText, children, buttonImage);
+//#region src/components/Button/ButtonBase.tsx
+/**
+* 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 ButtonBase = React.forwardRef(function ButtonBase({ as, children, className, dangerDescription = "danger", disabled = false, hasIconOnly = false, href, iconDescription, isExpressive = false, isSelected, kind = "primary", onBlur, onClick, onFocus, onMouseEnter, onMouseLeave, renderIcon: ButtonImageElement, size, tabIndex, type = "button", ...rest }, ref) {
+	const prefix = usePrefix();
+	const commonProps = {
+		tabIndex,
+		className: classNames(className, {
+			[`${prefix}--btn`]: true,
+			[`${prefix}--btn--xs`]: size === "xs" && !isExpressive,
+			[`${prefix}--btn--sm`]: size === "sm" && !isExpressive,
+			[`${prefix}--btn--md`]: size === "md" && !isExpressive,
+			[`${prefix}--btn--lg`]: size === "lg" && !isExpressive,
+			[`${prefix}--btn--xl`]: size === "xl",
+			[`${prefix}--btn--2xl`]: size === "2xl",
+			[`${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"
+		}),
+		ref
+	};
+	const buttonImage = !ButtonImageElement ? null : /* @__PURE__ */ jsx(ButtonImageElement, {
+		"aria-label": iconDescription,
+		className: `${prefix}--btn__icon`,
+		"aria-hidden": "true"
+	});
+	const dangerButtonVariants = [
+		"danger",
+		"danger--tertiary",
+		"danger--ghost"
+	];
+	let component = "button";
+	const assistiveId = useId("danger-description");
+	const { "aria-pressed": ariaPressed, "aria-describedby": ariaDescribedBy } = rest;
+	let otherProps = {
+		disabled,
+		type,
+		"aria-describedby": dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || void 0,
+		"aria-pressed": ariaPressed ?? (hasIconOnly && kind === "ghost" ? isSelected : void 0)
+	};
+	const anchorProps = { href };
+	let assistiveText = null;
+	if (dangerButtonVariants.includes(kind)) assistiveText = /* @__PURE__ */ jsx("span", {
+		id: assistiveId,
+		className: `${prefix}--visually-hidden`,
+		children: dangerDescription
+	});
+	if (as) {
+		component = as;
+		otherProps = {
+			...otherProps,
+			...anchorProps
+		};
+	} else if (href && !disabled) {
+		component = "a";
+		otherProps = anchorProps;
+	}
+	return React.createElement(component, {
+		onMouseEnter,
+		onMouseLeave,
+		onFocus,
+		onBlur,
+		onClick,
+		...rest,
+		...commonProps,
+		...otherProps
+	}, assistiveText, children, buttonImage);
 });
 
-export { ButtonBase as default };
+//#endregion
+export { ButtonBase as default };

package/es/components/Button/index.js

@@ -1,14 +1,21 @@
 /**
- * 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 Button from './Button.js';
-export { ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions } from './Button.js';
-export { ButtonSkeleton } from './Button.Skeleton.js';
-
+import Button, { ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions } from "./Button.js";
+import ButtonSkeleton from "./Button.Skeleton.js";
 
+//#region src/components/Button/index.ts
+/**
+* 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.
+*/
+var Button_default = Button;
 
-export { Button, Button as default };
+//#endregion
+export { Button_default as default };

package/es/components/ButtonSet/ButtonSet.js

@@ -1,111 +1,87 @@
 /**
- * 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 React, { forwardRef, useRef, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { usePrefix } from '../../internal/usePrefix.js';
-import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
+import classNames from "classnames";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const buttonOrder = kind => ({
-  ghost: 1,
-  'danger--ghost': 2,
-  tertiary: 3,
-  danger: 5,
-  primary: 6
+//#region src/components/ButtonSet/ButtonSet.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 buttonOrder = (kind) => ({
+	ghost: 1,
+	"danger--ghost": 2,
+	tertiary: 3,
+	danger: 5,
+	primary: 6
 })[kind] ?? 4;
-const getButtonKind = element => {
-  if (/*#__PURE__*/React.isValidElement(element) && element.props && typeof element.props === 'object') {
-    const props = element.props;
-    return props.kind ?? 'primary';
-  }
-  return 'primary';
+const getButtonKind = (element) => {
+	if (React.isValidElement(element) && element.props && typeof element.props === "object") return element.props.kind ?? "primary";
+	return "primary";
 };
-const ButtonSet = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    fluid,
-    stacked,
-    ...rest
-  } = props;
-  const prefix = usePrefix();
-  const fluidInnerRef = useRef(null);
-  const [isStacked, setIsStacked] = useState(false);
-  const [sortedChildren, setSortedChildren] = useState(React.Children.toArray(children));
-
-  /**
-   * Used to determine if the buttons are currently stacked
-   */
-  useIsomorphicEffect(() => {
-    const checkStacking = () => {
-      let newIsStacked = stacked || false;
-      if (fluidInnerRef && fluidInnerRef.current) {
-        const computedStyle = window.getComputedStyle(fluidInnerRef.current);
-        newIsStacked = computedStyle?.getPropertyValue?.('--flex-direction') === 'column';
-      }
-      return newIsStacked;
-    };
-
-    /* initial value not dependant on observer */
-    setIsStacked(checkStacking());
-    if (!fluidInnerRef.current) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver(() => {
-      setIsStacked(checkStacking());
-    });
-    resizeObserver.observe(fluidInnerRef.current);
-    return () => resizeObserver.disconnect();
-  }, [fluid, stacked]);
-  useEffect(() => {
-    const newSortedChildren = React.Children.toArray(children);
-    newSortedChildren.sort((a, b) => {
-      return (buttonOrder(getButtonKind(a)) - buttonOrder(getButtonKind(b))) * (isStacked ? -1 : 1);
-    });
-    setSortedChildren(newSortedChildren);
-
-    // adding sortedChildren to deps causes an infinite loop
-  }, [children, isStacked]);
-  const buttonSetClasses = cx(className, `${prefix}--btn-set`, {
-    [`${prefix}--btn-set--stacked`]: isStacked,
-    [`${prefix}--btn-set--fluid`]: fluid
-  });
-  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: buttonSetClasses,
-    ref: ref
-  }), fluid ? /*#__PURE__*/React.createElement("div", {
-    ref: fluidInnerRef,
-    className: cx(`${prefix}--btn-set__fluid-inner`, {
-      [`${prefix}--btn-set__fluid-inner--auto-stack`]: true
-    })
-  }, sortedChildren) : children);
+const ButtonSet = forwardRef((props, ref) => {
+	const { children, className, fluid, stacked, ...rest } = props;
+	const prefix = usePrefix();
+	const fluidInnerRef = useRef(null);
+	const [isStacked, setIsStacked] = useState(false);
+	const [sortedChildren, setSortedChildren] = useState(React.Children.toArray(children));
+	/**
+	* Used to determine if the buttons are currently stacked
+	*/
+	useIsomorphicEffect(() => {
+		const checkStacking = () => {
+			let newIsStacked = stacked || false;
+			if (fluidInnerRef && fluidInnerRef.current) newIsStacked = window.getComputedStyle(fluidInnerRef.current)?.getPropertyValue?.("--flex-direction") === "column";
+			return newIsStacked;
+		};
+		setIsStacked(checkStacking());
+		if (!fluidInnerRef.current) return;
+		const resizeObserver = new ResizeObserver(() => {
+			setIsStacked(checkStacking());
+		});
+		resizeObserver.observe(fluidInnerRef.current);
+		return () => resizeObserver.disconnect();
+	}, [fluid, stacked]);
+	useEffect(() => {
+		const newSortedChildren = React.Children.toArray(children);
+		newSortedChildren.sort((a, b) => {
+			return (buttonOrder(getButtonKind(a)) - buttonOrder(getButtonKind(b))) * (isStacked ? -1 : 1);
+		});
+		setSortedChildren(newSortedChildren);
+	}, [children, isStacked]);
+	const buttonSetClasses = classNames(className, `${prefix}--btn-set`, {
+		[`${prefix}--btn-set--stacked`]: isStacked,
+		[`${prefix}--btn-set--fluid`]: fluid
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: buttonSetClasses,
+		ref,
+		children: fluid ? /* @__PURE__ */ jsx("div", {
+			ref: fluidInnerRef,
+			className: classNames(`${prefix}--btn-set__fluid-inner`, { [`${prefix}--btn-set__fluid-inner--auto-stack`]: true }),
+			children: sortedChildren
+		}) : children
+	});
 });
-ButtonSet.displayName = 'ButtonSet';
+ButtonSet.displayName = "ButtonSet";
 ButtonSet.propTypes = {
-  /**
-   * Specify the content of your ButtonSet
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be added to your ButtonSet
-   */
-  className: PropTypes.string,
-  /**
-   * fluid: button set resize to the size of the container up to a maximum dependant on the
-   * number of buttons.
-   */
-  fluid: PropTypes.bool,
-  /**
-   * Specify the button arrangement of the set (vertically stacked or
-   * horizontal) - ignored when fluid is true
-   */
-  stacked: PropTypes.bool
+	children: PropTypes.node,
+	className: PropTypes.string,
+	fluid: PropTypes.bool,
+	stacked: PropTypes.bool
 };
 
-export { ButtonSet as default };
+//#endregion
+export { ButtonSet as default };

package/es/components/ButtonSet/index.js

@@ -1,12 +1,20 @@
 /**
- * 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 ButtonSet from './ButtonSet.js';
-
+import ButtonSet from "./ButtonSet.js";
 
+//#region src/components/ButtonSet/index.ts
+/**
+* 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.
+*/
+var ButtonSet_default = ButtonSet;
 
-export { ButtonSet, ButtonSet as default };
+//#endregion
+export { ButtonSet_default as default };

package/es/components/ChatButton/ChatButton.Skeleton.js

@@ -1,38 +1,38 @@
 /**
- * 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 ChatButtonSkeleton = ({
-  className,
-  size,
-  ...rest
-}) => {
-  const prefix = usePrefix();
-  const skeletonClasses = cx(className, `${prefix}--skeleton`, `${prefix}--btn`, `${prefix}--chat-btn`, {
-    [`${prefix}--layout--size-${size}`]: size
-  });
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: skeletonClasses
-  }, rest));
+//#region src/components/ChatButton/ChatButton.Skeleton.tsx
+/**
+* Copyright IBM Corp. 2024
+*
+* 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 ChatButtonSkeleton = ({ className, size, ...rest }) => {
+	const prefix = usePrefix();
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(className, `${prefix}--skeleton`, `${prefix}--btn`, `${prefix}--chat-btn`, { [`${prefix}--layout--size-${size}`]: size }),
+		...rest
+	});
 };
 ChatButtonSkeleton.propTypes = {
-  /**
-   * Specify an optional className to add.
-   */
-  className: PropTypes.string,
-  /**
-   * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes:
-   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+	className: PropTypes.string,
+	size: PropTypes.oneOf([
+		"sm",
+		"md",
+		"lg"
+	])
 };
 
-export { ChatButtonSkeleton as default };
+//#endregion
+export { ChatButtonSkeleton as default };