@carbon/react 1.77.0 → 1.78.0-rc.0

package/lib/components/OverflowMenu/OverflowMenu.d.ts

@@ -1,25 +1,13 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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.
  */
+import { type MenuDirection, type MenuOffset } from '../../internal/FloatingMenu';
 import React, { ComponentType } from 'react';
 import PropTypes from 'prop-types';
-/**
- * @param {Element} menuBody The menu body with the menu arrow.
- * @param {string} direction The floating menu direction.
- * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
- * @private
- */
-export declare const getMenuOffset: (menuBody: any, direction: any, trigger: any, flip: any) => {
-    left: number;
-    top: number;
-} | undefined;
-interface Offset {
-    top?: number | null | undefined;
-    left?: number | null | undefined;
-}
+export declare const getMenuOffset: MenuOffset;
 type IconProps = {
     className?: string;
     'aria-label'?: string;
@@ -46,7 +34,7 @@ export interface OverflowMenuProps {
     /**
      * The menu direction.
      */
-    direction?: string;
+    direction?: MenuDirection;
     /**
      * `true` if the menu alignment should be flipped.
      */
@@ -75,11 +63,11 @@ export interface OverflowMenuProps {
     /**
      * The adjustment in position applied to the floating menu.
      */
-    menuOffset?: Offset | (() => void);
+    menuOffset?: MenuOffset;
     /**
      * The adjustment in position applied to the floating menu.
      */
-    menuOffsetFlip?: Offset | (() => void);
+    menuOffsetFlip?: MenuOffset;
     /**
      * The class to apply to the menu options
      */
@@ -246,10 +234,10 @@ declare class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMe
     _hBlurTimeout: any;
     /**
      * The element ref of the tooltip's trigger button.
-     * @type {React.RefObject<Element>}
+     * @type {React.RefObject<HTMLElement>}
      * @private
      */
-    _triggerRef: React.RefObject<unknown>;
+    _triggerRef: React.RefObject<HTMLElement>;
     componentDidUpdate(_: any, prevState: any): void;
     componentDidMount(): void;
     static getDerivedStateFromProps({ open }: {

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -64,13 +64,6 @@ const triggerButtonPositionFactors = {
   [FloatingMenu.DIRECTION_TOP]: -2,
   [FloatingMenu.DIRECTION_BOTTOM]: -1
 };
-
-/**
- * @param {Element} menuBody The menu body with the menu arrow.
- * @param {string} direction The floating menu direction.
- * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
- * @private
- */
 const getMenuOffset = (menuBody, direction, trigger, flip) => {
   const triggerButtonPositionProp = triggerButtonPositionProps[direction];
   const triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
@@ -92,6 +85,11 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
           top: 0
         };
       }
+    default:
+      return {
+        left: 0,
+        top: 0
+      };
   }
 };
 class OverflowMenu extends React__default["default"].Component {
@@ -117,7 +115,7 @@ class OverflowMenu extends React__default["default"].Component {
     _rollupPluginBabelHelpers.defineProperty(this, "_hBlurTimeout", void 0);
     /**
      * The element ref of the tooltip's trigger button.
-     * @type {React.RefObject<Element>}
+     * @type {React.RefObject<HTMLElement>}
      * @private
      */
     _rollupPluginBabelHelpers.defineProperty(this, "_triggerRef", /*#__PURE__*/React__default["default"].createRef());
@@ -374,7 +372,7 @@ class OverflowMenu extends React__default["default"].Component {
       onKeyDown: this.handleKeyPress,
       id: menuBodyId
     }, childrenWithProps);
-    const wrappedMenuBody = /*#__PURE__*/React__default["default"].createElement(FloatingMenu["default"], {
+    const wrappedMenuBody = /*#__PURE__*/React__default["default"].createElement(FloatingMenu.FloatingMenu, {
       focusTrap: focusTrap,
       triggerRef: this._triggerRef,
       menuDirection: direction,

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -16,8 +16,8 @@ var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 var warning = require('../../internal/warning.js');
 require('../Text/index.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -16,8 +16,8 @@ var React = require('react');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/lib/components/RadioTile/RadioTile.js

@@ -20,8 +20,8 @@ var deprecate = require('../../prop-types/deprecate.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var index = require('../FeatureFlags/index.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/lib/components/Select/Select.js

@@ -59,8 +59,16 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     isFluid
   } = React.useContext(FormContext.FormContext);
   const [isFocused, setIsFocused] = React.useState(false);
-  const [title, setTitle] = React.useState('');
   const selectInstanceId = useId.useId();
+  // Convert children to an array of valid elements once using type narrowing
+  const validChildren = React__default["default"].Children.toArray(children).filter(child => /*#__PURE__*/React__default["default"].isValidElement(child));
+
+  // Find the default option based on the specified defaultValue
+  const defaultOption = validChildren.find(child => child.props?.value === other?.defaultValue);
+
+  // Use the default option's text if available; otherwise, fallback to the first option's text
+  const initialTitle = defaultOption?.props?.text || validChildren[0]?.props?.text || '';
+  const [title, setTitle] = React.useState(initialTitle);
   const selectClasses = cx__default["default"]({
     [`${prefix}--select`]: true,
     [`${prefix}--select--inline`]: inline,
@@ -115,7 +123,8 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     setIsFocused(evt.type === 'focus' ? true : false);
   };
   const handleChange = evt => {
-    setTitle(evt?.target?.value);
+    const selectedOption = evt?.target?.options[evt.target.selectedIndex];
+    setTitle(selectedOption?.text);
   };
   const readOnlyEventHandlers = {
     onMouseDown: evt => {

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

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2025, 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.
+ */
+import React from 'react';
+export declare const ShapeIndicatorKinds: string[];
+export type ShapeIndicatorKind = (typeof ShapeIndicatorKinds)[number];
+export interface ShapeIndicatorProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Specify the kind of shape to be used
+     */
+    kind: ShapeIndicatorKind;
+    /**
+     * Label next to the shape
+     */
+    label: string;
+    /**
+     * Specify the text size of the Shape Indicator. Defaults to 12.
+     */
+    textSize?: 12 | 14;
+}
+export declare const ShapeIndicator: React.ForwardRefExoticComponent<ShapeIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export default ShapeIndicator;

package/lib/components/ShapeIndicator/index.js

@@ -0,0 +1,104 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+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 usePrefix = require('../../internal/usePrefix.js');
+var iconsReact = require('@carbon/icons-react');
+
+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);
+
+var _path;
+const ShapeIndicatorKinds = ['failed', 'critical', 'high', 'medium', 'low', 'cautious', 'undefined', 'stable', 'informative', 'incomplete', 'draft'];
+
+// TODO: update to import '@carbon/icons-react'
+const incompleteIcon = props => /*#__PURE__*/React__default["default"].createElement("svg", _rollupPluginBabelHelpers["extends"]({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  fill: "none",
+  "aria-hidden": "true"
+}, props), /*#__PURE__*/React__default["default"].createElement("path", {
+  fill: "#fff",
+  fillOpacity: 0.01,
+  d: "M0 0h16v16H0z",
+  style: {
+    mixBlendMode: 'multiply'
+  }
+}), _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+  fill: "#161616",
+  d: "M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 2a4.004 4.004 0 0 1 4 4H4a4.004 4.004 0 0 1 4-4Z"
+})));
+const shapeTypes = {
+  failed: iconsReact.Critical,
+  critical: iconsReact.CriticalSeverity,
+  high: iconsReact.Caution,
+  medium: iconsReact.DiamondFill,
+  low: iconsReact.LowSeverity,
+  cautious: iconsReact.Caution,
+  undefined: iconsReact.DiamondFill,
+  stable: iconsReact.CircleFill,
+  informative: iconsReact.LowSeverity,
+  incomplete: incompleteIcon,
+  draft: iconsReact.CircleStroke
+};
+const ShapeIndicator = /*#__PURE__*/React__default["default"].forwardRef(function ShapeIndicatorContent(_ref, ref) {
+  let {
+    className: customClassName,
+    kind,
+    label,
+    textSize = 12,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](`${prefix}--shape-indicator`, customClassName, {
+    [`${prefix}--shape-indicator--14`]: textSize == 14
+  });
+  const ShapeForKind = shapeTypes[kind];
+  if (!ShapeForKind) {
+    return null;
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames,
+    ref: ref
+  }, /*#__PURE__*/React__default["default"].createElement(ShapeForKind, {
+    size: 16,
+    className: `${prefix}--shape-indicator--${kind}`
+  }), label);
+});
+ShapeIndicator.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify the kind of the Shape Indicator
+   */
+  kind: PropTypes__default["default"].oneOf(ShapeIndicatorKinds).isRequired,
+  /**
+   * Label next to the shape.
+   */
+  label: PropTypes__default["default"].string.isRequired,
+  /**
+   * Specify the text size of the Shape Indicator. Defaults to 12.
+   */
+  textSize: PropTypes__default["default"].oneOf([12, 14])
+};
+
+exports.ShapeIndicator = ShapeIndicator;
+exports.ShapeIndicatorKinds = ShapeIndicatorKinds;
+exports["default"] = ShapeIndicator;

package/lib/components/Tabs/Tabs.d.ts

@@ -353,10 +353,11 @@ export interface TabProps extends HTMLAttributes<HTMLElement> {
     secondaryLabel?: string;
 }
 declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
-/**
- * IconTab
- */
 export interface IconTabProps extends DivAttributes {
+    /**
+     * **Experimental**: Display an empty dot badge on the Tab.
+     */
+    badgeIndicator?: boolean;
     /**
      * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
      */
@@ -377,7 +378,8 @@ export interface IconTabProps extends DivAttributes {
      * Provide the label to be rendered inside the Tooltip. The label will use
      * `aria-labelledby` and will fully describe the child node that is provided.
      * This means that if you have text in the child node it will not be
-     * announced to the screen reader.
+     * announced to the screen reader. If using the badgeIndicator then provide a
+     * label with describing that there is a new notification.
      */
     label: ReactNode;
     /**

package/lib/components/Tabs/Tabs.js

@@ -36,9 +36,10 @@ var deprecate = require('../../prop-types/deprecate.js');
 var useEvent = require('../../internal/useEvent.js');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
 require('../Text/index.js');
+var index = require('../BadgeIndicator/index.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -47,7 +48,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _ChevronLeft, _ChevronRight;
+var _ChevronLeft, _ChevronRight, _BadgeIndicator;
 const verticalTabHeight = 64;
 
 // Used to manage the overall state of the Tabs
@@ -804,23 +805,26 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
     onTabCloseRequest
   } = React__default["default"].useContext(TabsContext);
   const {
-    index,
+    index: index$1,
     hasSecondaryLabel,
     contained
   } = React__default["default"].useContext(TabContext);
+  const {
+    badgeIndicator
+  } = React__default["default"].useContext(IconTabContext) || {};
   const dismissIconRef = React.useRef(null);
   const tabRef = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, tabRef]);
   const [ignoreHover, setIgnoreHover] = React.useState(false);
-  const id = `${baseId}-tab-${index}`;
-  const panelId = `${baseId}-tabpanel-${index}`;
+  const id = `${baseId}-tab-${index$1}`;
+  const panelId = `${baseId}-tabpanel-${index$1}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   const isEllipsisActive = element => {
     setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
     return element.offsetHeight < element.scrollHeight;
   };
   const className = cx__default["default"](`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-link`, {
-    [`${prefix}--tabs__nav-item--selected`]: selectedIndex === index,
+    [`${prefix}--tabs__nav-item--selected`]: selectedIndex === index$1,
     [`${prefix}--tabs__nav-item--disabled`]: disabled,
     [`${prefix}--tabs__nav-item--hover-off`]: ignoreHover
   }, customClassName);
@@ -856,7 +860,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
   }, [prefix, id]);
   const handleClose = evt => {
     evt.stopPropagation();
-    onTabCloseRequest?.(index);
+    onTabCloseRequest?.(index$1);
 
     // set focus after removing tab
     if (tabRef.current && tabRef.current.parentElement) {
@@ -867,7 +871,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
       }).length;
 
       // if not removing last tab focus on next tab
-      if (tabRef.current && index + 1 !== tabCount) {
+      if (tabRef.current && index$1 + 1 !== tabCount) {
         tabRef.current.focus();
       }
       // if removing last tab focus on previous tab
@@ -890,21 +894,21 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
     })
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    tabIndex: selectedIndex === index && dismissable ? 0 : -1,
+    tabIndex: selectedIndex === index$1 && dismissable ? 0 : -1,
     "aria-disabled": disabled,
-    "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
+    "aria-hidden": selectedIndex === index$1 && dismissable ? 'false' : 'true',
     disabled: disabled,
     className: cx__default["default"]({
       [`${prefix}--tabs__nav-item--close-icon`]: dismissable,
       [`${prefix}--visually-hidden`]: !dismissable,
-      [`${prefix}--tabs__nav-item--close-icon--selected`]: selectedIndex === index,
+      [`${prefix}--tabs__nav-item--close-icon--selected`]: selectedIndex === index$1,
       [`${prefix}--tabs__nav-item--close-icon--disabled`]: disabled
     }),
     onClick: handleClose,
     title: `Remove ${typeof children === 'string' ? children : ''} tab`,
     ref: dismissIconRef
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
-    "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
+    "aria-hidden": selectedIndex === index$1 && dismissable ? 'false' : 'true',
     "aria-label": `Press delete to remove ${typeof children === 'string' ? children : ''} tab`
   })));
   const hasIcon = Icon ?? dismissable;
@@ -921,7 +925,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
     }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
       "aria-controls": panelId,
       "aria-disabled": disabled,
-      "aria-selected": selectedIndex === index,
+      "aria-selected": selectedIndex === index$1,
       ref: ref,
       id: id,
       role: "tab",
@@ -932,11 +936,11 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
         if (disabled) {
           return;
         }
-        setSelectedIndex(index);
+        setSelectedIndex(index$1);
         onClick?.(evt);
       },
       onKeyDown: handleKeyDown,
-      tabIndex: selectedIndex === index ? '0' : '-1',
+      tabIndex: selectedIndex === index$1 ? '0' : '-1',
       type: "button"
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--tabs__nav-item-label-wrapper`
@@ -951,7 +955,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
-    "aria-selected": selectedIndex === index,
+    "aria-selected": selectedIndex === index$1,
     ref: ref,
     id: id,
     role: "tab",
@@ -961,11 +965,11 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
       if (disabled) {
         return;
       }
-      setSelectedIndex(index);
+      setSelectedIndex(index$1);
       onClick?.(evt);
     },
     onKeyDown: handleKeyDown,
-    tabIndex: selectedIndex === index ? '0' : '-1',
+    tabIndex: selectedIndex === index$1 ? '0' : '-1',
     type: "button"
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--tabs__nav-item-label-wrapper`
@@ -985,7 +989,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
     as: "div",
     className: `${prefix}--tabs__nav-item-secondary-label`,
     title: secondaryLabel
-  }, secondaryLabel)), DismissIcon);
+  }, secondaryLabel), !disabled && badgeIndicator && (_BadgeIndicator || (_BadgeIndicator = /*#__PURE__*/React__default["default"].createElement(index.BadgeIndicator, null)))), DismissIcon);
 });
 Tab.propTypes = {
   /**
@@ -1036,8 +1040,10 @@ Tab.propTypes = {
  * IconTab
  */
 
+const IconTabContext = /*#__PURE__*/React.createContext(false);
 const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab(_ref11, ref) {
   let {
+    badgeIndicator,
     children,
     className: customClassName,
     defaultOpen = false,
@@ -1047,8 +1053,16 @@ const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconT
     ...rest
   } = _ref11;
   const prefix = usePrefix.usePrefix();
-  const classNames = cx__default["default"](`${prefix}--tabs__nav-item--icon-only`, customClassName);
-  return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+  const value = React.useMemo(() => ({
+    badgeIndicator
+  }), [badgeIndicator]);
+  const hasSize20 = /*#__PURE__*/React__default["default"].isValidElement(children) && children.props?.size === 20;
+  const classNames = cx__default["default"](`${prefix}--tabs__nav-item--icon-only`, customClassName, {
+    [`${prefix}--tabs__nav-item--icon-only__20`]: hasSize20
+  });
+  return /*#__PURE__*/React__default["default"].createElement(IconTabContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     align: "bottom",
     defaultOpen: defaultOpen,
     className: `${prefix}--icon-tooltip`,
@@ -1058,9 +1072,13 @@ const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconT
   }, /*#__PURE__*/React__default["default"].createElement(Tab, _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     ref: ref
-  }, rest), children));
+  }, rest), children)));
 });
 IconTab.propTypes = {
+  /**
+   * **Experimental**: Display an empty dot badge on the Tab.
+   */
+  badgeIndicator: PropTypes__default["default"].bool,
   /**
    * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
    */
@@ -1081,7 +1099,8 @@ IconTab.propTypes = {
    * Provide the label to be rendered inside the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
    * This means that if you have text in the child node it will not be
-   * announced to the screen reader.
+   * announced to the screen reader. If using the badgeIndicator then provide a
+   * label with describing that there is a new notification.
    */
   label: PropTypes__default["default"].node.isRequired,
   /**

package/lib/components/Tag/OperationalTag.d.ts

@@ -4,7 +4,6 @@
  * 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, { MouseEventHandler } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
@@ -54,40 +53,6 @@ export interface OperationalTagBaseProps {
     type?: keyof typeof TYPES;
 }
 export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<T, OperationalTagBaseProps>;
-declare const OperationalTag: {
-    <T extends React.ElementType>({ className, disabled, id, renderIcon, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * Provide a custom className that is applied to the containing <span>
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify if the `OperationalTag` 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 size of the Tag. Currently supports either `sm`,
-         * `md` (default) or `lg` sizes.
-         */
-        size: PropTypes.Requireable<string>;
-        /**
-         * Provide text to be rendered inside of a the tag.
-         */
-        text: PropTypes.Requireable<string>;
-        /**
-         * Specify the type of the `Tag`
-         */
-        type: PropTypes.Requireable<string>;
-    };
-};
+declare const OperationalTag: React.ForwardRefExoticComponent<Omit<OperationalTagProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export declare const types: string[];
 export default OperationalTag;

package/lib/components/Tag/OperationalTag.js

@@ -20,6 +20,7 @@ require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 require('../Text/index.js');
 var isEllipsisActive = require('./isEllipsisActive.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -40,7 +41,7 @@ const TYPES = {
   'cool-gray': 'Cool-Gray',
   'warm-gray': 'Warm-Gray'
 };
-const OperationalTag = _ref => {
+const OperationalTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     className,
     disabled,
@@ -61,6 +62,7 @@ const OperationalTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   const tooltipClasses = cx__default["default"](`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
+  const combinedRef = mergeRefs["default"](tagRef, forwardRef);
   if (isEllipsisApplied) {
     return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
       label: text,
@@ -70,7 +72,7 @@ const OperationalTag = _ref => {
       onMouseEnter: () => false,
       closeOnActivation: true
     }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
-      ref: tagRef,
+      ref: combinedRef,
       type: type,
       size: size,
       renderIcon: renderIcon,
@@ -83,7 +85,7 @@ const OperationalTag = _ref => {
     }, text)));
   }
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
-    ref: tagRef,
+    ref: combinedRef,
     type: type,
     size: size,
     renderIcon: renderIcon,
@@ -94,7 +96,7 @@ const OperationalTag = _ref => {
     title: text,
     className: `${prefix}--tag__label`
   }, text));
-};
+});
 OperationalTag.propTypes = {
   /**
    * Provide a custom className that is applied to the containing <span>

package/lib/components/Text/Text.d.ts

@@ -1,17 +1,19 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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.
  */
-import React, { ReactNode } from 'react';
-import { TextDir } from './TextDirection';
-import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
+import { type ElementType, type ReactElement, type ReactNode } from 'react';
+import { PolymorphicComponentPropWithRef, PolymorphicRef } from '../../internal/PolymorphicProps';
+import { type TextDir } from '.';
 export interface TextBaseProps {
-    dir?: TextDir | undefined;
+    dir?: TextDir;
     children?: ReactNode;
 }
-export type TextProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, TextBaseProps>;
-type TextComponent = <T extends React.ElementType = 'span'>(props: TextProps<T>) => React.ReactElement | any;
-declare const Text: TextComponent;
-export { Text };
+export type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, TextBaseProps>;
+type TextComponent = <T extends ElementType = 'span'>(props: TextProps<T> & {
+    ref?: PolymorphicRef<T>;
+}) => ReactElement | null;
+export declare const Text: TextComponent;
+export {};