@carbon/react 1.103.0 → 1.104.0

package/es/components/Tag/Tag.js

@@ -1,215 +1,167 @@
 /**
- * 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, { useRef, useState, cloneElement } from 'react';
-import cx from 'classnames';
-import { Close } from '@carbon/icons-react';
-import { useId } from '../../internal/useId.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { Text } from '../Text/Text.js';
-import '../Text/TextDirection.js';
-import { deprecate } from '../../prop-types/deprecate.js';
-import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
-import '../Tooltip/Tooltip.js';
-import { isEllipsisActive } from './isEllipsisActive.js';
-import { useMergedRefs } from '../../internal/useMergedRefs.js';
-import { AILabel } from '../AILabel/index.js';
-import { isComponentElement } from '../../internal/utils.js';
-import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { Text } from "../Text/Text.js";
+import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
+import { useId } from "../../internal/useId.js";
+import { deprecate } from "../../prop-types/deprecate.js";
+import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { DefinitionTooltip } from "../Tooltip/DefinitionTooltip.js";
+import { AILabel } from "../AILabel/index.js";
+import { isComponentElement } from "../../internal/utils.js";
+import { isEllipsisActive } from "./isEllipsisActive.js";
+import classNames from "classnames";
+import React, { cloneElement, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Close } from "@carbon/icons-react";
 
-var _Close;
+//#region src/components/Tag/Tag.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 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',
-  'high-contrast': 'High-Contrast',
-  outline: 'Outline'
+	red: "Red",
+	magenta: "Magenta",
+	purple: "Purple",
+	blue: "Blue",
+	cyan: "Cyan",
+	teal: "Teal",
+	green: "Green",
+	gray: "Gray",
+	"cool-gray": "Cool-Gray",
+	"warm-gray": "Warm-Gray",
+	"high-contrast": "High-Contrast",
+	outline: "Outline"
 };
 const SIZES = {
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg'
+	sm: "sm",
+	md: "md",
+	lg: "lg"
 };
-// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
-const TagBase = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  decorator,
-  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,
-  ...other
-}, forwardRef) => {
-  const prefix = usePrefix();
-  const tagRef = useRef(null);
-  if (filter) {
-    // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
-    console.warn('The `filter` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.');
-  }
-  if (onClose) {
-    // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
-    console.warn('The `onClose` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.');
-  }
-  const ref = useMergedRefs([forwardRef, tagRef]);
-  const generatedTagId = useId();
-  const tagId = id ?? `tag-${generatedTagId}`;
-  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  useIsomorphicEffect(() => {
-    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    setIsEllipsisApplied(isEllipsisActive(newElement));
-  }, [prefix, tagRef]);
-  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,
-    [`${prefix}--tag--${size}`]: size,
-    // TODO: V12 - Remove this class
-    [`${prefix}--layout--size-${size}`]: size,
-    [`${prefix}--tag--${type}`]: type,
-    [`${prefix}--tag--interactive`]: other.onClick && !isInteractiveTag && isEllipsisApplied
-  });
-  const typeText = type !== undefined && type in Object.keys(TYPES) ? TYPES[type] : '';
-  const handleClose = event => {
-    if (onClose) {
-      event.stopPropagation();
-      onClose(event);
-    }
-  };
-
-  // AILabel is always size `sm` and `inline`
-  const candidate = slug ?? decorator;
-  const candidateIsAILabel = isComponentElement(candidate, AILabel);
-  const normalizedDecorator = candidateIsAILabel && !isInteractiveTag ? /*#__PURE__*/cloneElement(candidate, {
-    size: 'sm',
-    kind: 'inline'
-  }) : null;
-  if (filter) {
-    const ComponentTag = BaseComponent ?? 'div';
-    return /*#__PURE__*/React.createElement(ComponentTag, _extends({
-      className: tagClasses,
-      id: tagId
-    }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React.createElement("div", {
-      className: `${prefix}--tag__custom-icon`
-    }, /*#__PURE__*/React.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React.createElement(Text, {
-      title: typeof children === 'string' ? children : undefined,
-      className: `${prefix}--tag__label`
-    }, children !== null && children !== undefined ? children : typeText), normalizedDecorator, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: `${prefix}--tag__close-icon`,
-      onClick: handleClose,
-      disabled: disabled,
-      "aria-label": title,
-      title: title
-    }, _Close || (_Close = /*#__PURE__*/React.createElement(Close, null))));
-  }
-  const ComponentTag = BaseComponent ?? (other.onClick || className?.includes(`${prefix}--tag--operational`) ? 'button' : 'div');
-  const labelClasses = cx({
-    [`${prefix}--tag__label`]: !isInteractiveTag
-  });
-  return /*#__PURE__*/React.createElement(ComponentTag, _extends({
-    ref: ref,
-    disabled: disabled,
-    className: tagClasses,
-    id: tagId,
-    type: ComponentTag === 'button' ? 'button' : undefined
-  }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--tag__custom-icon`
-  }, /*#__PURE__*/React.createElement(CustomIconElement, null)) : '', isEllipsisApplied && !isInteractiveTag ? /*#__PURE__*/React.createElement(DefinitionTooltip, {
-    openOnHover: false,
-    definition: children !== null && children !== undefined ? children : typeText,
-    className: `${prefix}--definition--tooltip--tag`
-  }, /*#__PURE__*/React.createElement(Text, {
-    title: children !== null && children !== undefined && typeof children === 'string' ? children : typeText,
-    className: labelClasses
-  }, children !== null && children !== undefined ? children : typeText)) : /*#__PURE__*/React.createElement(Text, {
-    title: children !== null && children !== undefined && typeof children === 'string' ? children : typeText,
-    className: labelClasses
-  }, children !== null && children !== undefined ? children : typeText), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--tag__decorator`
-  }, normalizedDecorator) : '');
+const Tag = React.forwardRef(({ children, className, decorator, id, type, filter, renderIcon: CustomIconElement, title = "Clear filter", disabled, onClose, size, as: BaseComponent, slug, ...other }, forwardRef) => {
+	const prefix = usePrefix();
+	const tagRef = useRef(null);
+	if (filter) console.warn("The `filter` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.");
+	if (onClose) console.warn("The `onClose` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.");
+	const ref = useMergedRefs([forwardRef, tagRef]);
+	const generatedTagId = useId();
+	const tagId = id ?? `tag-${generatedTagId}`;
+	const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
+	useIsomorphicEffect(() => {
+		const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+		setIsEllipsisApplied(isEllipsisActive(newElement));
+	}, [prefix, tagRef]);
+	const isInteractiveTag = [
+		`${prefix}--tag--selectable`,
+		`${prefix}--tag--filter`,
+		`${prefix}--tag--operational`
+	].some((el) => className?.includes(el));
+	const tagClasses = classNames(`${prefix}--tag`, className, {
+		[`${prefix}--tag--disabled`]: disabled,
+		[`${prefix}--tag--filter`]: filter,
+		[`${prefix}--tag--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size,
+		[`${prefix}--tag--${type}`]: type,
+		[`${prefix}--tag--interactive`]: other.onClick && !isInteractiveTag && isEllipsisApplied
+	});
+	const typeText = type !== void 0 && type in Object.keys(TYPES) ? TYPES[type] : "";
+	const handleClose = (event) => {
+		if (onClose) {
+			event.stopPropagation();
+			onClose(event);
+		}
+	};
+	const candidate = slug ?? decorator;
+	const normalizedDecorator = isComponentElement(candidate, AILabel) && !isInteractiveTag ? cloneElement(candidate, {
+		size: "sm",
+		kind: "inline"
+	}) : null;
+	if (filter) return /* @__PURE__ */ jsxs(BaseComponent ?? "div", {
+		className: tagClasses,
+		id: tagId,
+		...other,
+		children: [
+			CustomIconElement && size !== "sm" ? /* @__PURE__ */ jsx("div", {
+				className: `${prefix}--tag__custom-icon`,
+				children: /* @__PURE__ */ jsx(CustomIconElement, {})
+			}) : "",
+			/* @__PURE__ */ jsx(Text, {
+				title: typeof children === "string" ? children : void 0,
+				className: `${prefix}--tag__label`,
+				children: children !== null && children !== void 0 ? children : typeText
+			}),
+			normalizedDecorator,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: `${prefix}--tag__close-icon`,
+				onClick: handleClose,
+				disabled,
+				"aria-label": title,
+				title,
+				children: /* @__PURE__ */ jsx(Close, {})
+			})
+		]
+	});
+	const ComponentTag = BaseComponent ?? (other.onClick || className?.includes(`${prefix}--tag--operational`) ? "button" : "div");
+	const labelClasses = classNames({ [`${prefix}--tag__label`]: !isInteractiveTag });
+	return /* @__PURE__ */ jsxs(ComponentTag, {
+		ref,
+		disabled,
+		className: tagClasses,
+		id: tagId,
+		type: ComponentTag === "button" ? "button" : void 0,
+		...other,
+		children: [
+			CustomIconElement && size !== "sm" ? /* @__PURE__ */ jsx("div", {
+				className: `${prefix}--tag__custom-icon`,
+				children: /* @__PURE__ */ jsx(CustomIconElement, {})
+			}) : "",
+			isEllipsisApplied && !isInteractiveTag ? /* @__PURE__ */ jsx(DefinitionTooltip, {
+				openOnHover: false,
+				definition: children !== null && children !== void 0 ? children : typeText,
+				className: `${prefix}--definition--tooltip--tag`,
+				children: /* @__PURE__ */ jsx(Text, {
+					title: children !== null && children !== void 0 && typeof children === "string" ? children : typeText,
+					className: labelClasses,
+					children: children !== null && children !== void 0 ? children : typeText
+				})
+			}) : /* @__PURE__ */ jsx(Text, {
+				title: children !== null && children !== void 0 && typeof children === "string" ? children : typeText,
+				className: labelClasses,
+				children: children !== null && children !== void 0 ? children : typeText
+			}),
+			slug ? normalizedDecorator : decorator ? /* @__PURE__ */ jsx("div", {
+				className: `${prefix}--tag__decorator`,
+				children: normalizedDecorator
+			}) : ""
+		]
+	});
 });
-const Tag = TagBase;
-
-// @ts-expect-error - `propTypes` isn't typed.
 Tag.propTypes = {
-  /**
-   * Provide an alternative tag or component to use instead of the default
-   * wrapping element
-   */
-  as: PropTypes.elementType,
-  /**
-   * Provide content to be rendered inside of a `Tag`
-   */
-  children: PropTypes.node,
-  /**
-   * Provide a custom className that is applied to the containing <span>
-   */
-  className: PropTypes.string,
-  /**
-   * **Experimental:** Provide a `decorator` component to be rendered inside the `Tag` component
-   */
-  decorator: PropTypes.node,
-  /**
-   * Specify if the `Tag` is disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Determine if `Tag` is a filter/chip
-   */
-  filter: deprecate(PropTypes.bool, 'The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
-  /**
-   * Specify the id for the tag.
-   */
-  id: PropTypes.string,
-  /**
-   * Click handler for filter tag close button.
-   */
-  onClose: deprecate(PropTypes.func, 'The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
-  /**
-   * A component used to render an icon.
-   */
-  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 `Tag` component
-   */
-  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
-  /**
-   * Text to show on clear filters
-   */
-  title: deprecate(PropTypes.string, 'The `title` prop has been 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))
+	as: PropTypes.elementType,
+	children: PropTypes.node,
+	className: PropTypes.string,
+	decorator: PropTypes.node,
+	disabled: PropTypes.bool,
+	filter: deprecate(PropTypes.bool, "The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead."),
+	id: PropTypes.string,
+	onClose: deprecate(PropTypes.func, "The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead."),
+	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	size: PropTypes.oneOf(Object.keys(SIZES)),
+	slug: deprecate(PropTypes.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
+	title: deprecate(PropTypes.string, "The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead."),
+	type: PropTypes.oneOf(Object.keys(TYPES))
 };
+const types = Object.keys(TYPES);
 
-export { SIZES, TYPES, Tag as default };
+//#endregion
+export { SIZES, TYPES, Tag as default };

package/es/components/Tag/isEllipsisActive.js

@@ -1,16 +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.
  */
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-const isEllipsisActive = element => {
-  if (element) {
-    return element?.offsetWidth < element?.scrollWidth;
-  }
-  return false;
+//#region src/components/Tag/isEllipsisActive.ts
+/**
+* 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 isEllipsisActive = (element) => {
+	if (element) return element?.offsetWidth < element?.scrollWidth;
+	return false;
 };
 
-export { isEllipsisActive };
+//#endregion
+export { isEllipsisActive };

package/es/components/Text/Text.js

@@ -1,91 +1,78 @@
 /**
- * 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, { forwardRef, useContext, Children } from 'react';
-import { TextDirectionContext } from './TextDirectionContext.js';
+import { TextDirectionContext } from "./TextDirectionContext.js";
+import React, { Children, forwardRef, useContext } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
-const Text = /*#__PURE__*/forwardRef(({
-  as,
-  children,
-  dir = 'auto',
-  ...rest
-}, ref) => {
-  const context = useContext(TextDirectionContext);
-  const textProps = {};
-  const BaseComponent = as ?? 'span';
-  const value = {
-    ...context
-  };
-  if (!context) {
-    textProps.dir = dir;
-    value.direction = dir;
-  } else {
-    const {
-      direction: parentDirection,
-      getTextDirection
-    } = context;
-    if (getTextDirection && getTextDirection.current) {
-      const text = getTextFromChildren(children);
-      const override = getTextDirection.current(text);
-      if (parentDirection !== override) {
-        textProps.dir = override;
-        value.direction = override;
-      } else if (parentDirection === 'auto') {
-        textProps.dir = override;
-      }
-    } else if (parentDirection !== dir) {
-      textProps.dir = dir;
-      value.direction = dir;
-    } else if (parentDirection === 'auto') {
-      textProps.dir = dir;
-    }
-  }
-  return /*#__PURE__*/React.createElement(TextDirectionContext.Provider, {
-    value: value
-  }, /*#__PURE__*/React.createElement(BaseComponent, _extends({
-    ref: ref
-  }, rest, textProps), children));
+//#region src/components/Text/Text.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 Text = forwardRef(({ as, children, dir = "auto", ...rest }, ref) => {
+	const context = useContext(TextDirectionContext);
+	const textProps = {};
+	const BaseComponent = as ?? "span";
+	const value = { ...context };
+	if (!context) {
+		textProps.dir = dir;
+		value.direction = dir;
+	} else {
+		const { direction: parentDirection, getTextDirection } = context;
+		if (getTextDirection && getTextDirection.current) {
+			const text = getTextFromChildren(children);
+			const override = getTextDirection.current(text);
+			if (parentDirection !== override) {
+				textProps.dir = override;
+				value.direction = override;
+			} else if (parentDirection === "auto") textProps.dir = override;
+		} else if (parentDirection !== dir) {
+			textProps.dir = dir;
+			value.direction = dir;
+		} else if (parentDirection === "auto") textProps.dir = dir;
+	}
+	return /* @__PURE__ */ jsx(TextDirectionContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(BaseComponent, {
+			ref,
+			...rest,
+			...textProps,
+			children
+		})
+	});
 });
-
-// @ts-expect-error - `propTypes` isn't typed.
 Text.propTypes = {
-  /**
-   * Provide a custom element type used to render the outermost node
-   */
-  as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
-  /**
-   * Provide child elements or text to be rendered inside of this component
-   */
-  children: PropTypes.node,
-  /**
-   * Specify the text direction to be used for this component and any of its
-   * children
-   */
-  dir: PropTypes.oneOf(['ltr', 'rtl', 'auto'])
+	as: PropTypes.oneOfType([
+		PropTypes.func,
+		PropTypes.string,
+		PropTypes.elementType
+	]),
+	children: PropTypes.node,
+	dir: PropTypes.oneOf([
+		"ltr",
+		"rtl",
+		"auto"
+	])
 };
-const getTextFromChildren = children => {
-  if (typeof children === 'string') {
-    return children;
-  }
-  const text = Children.map(children, child => {
-    if (typeof child === 'string') {
-      return child;
-    }
-    return null;
-  })?.filter(text => {
-    return text !== null;
-  });
-  if (text?.length === 1) {
-    return text[0];
-  }
-  return text;
+const getTextFromChildren = (children) => {
+	if (typeof children === "string") return children;
+	const text = Children.map(children, (child) => {
+		if (typeof child === "string") return child;
+		return null;
+	})?.filter((text) => {
+		return text !== null;
+	});
+	if (text?.length === 1) return text[0];
+	return text;
 };
 
-export { Text };
+//#endregion
+export { Text };