@carbon/react 1.58.0-rc.0 → 1.58.1

package/lib/components/Tag/Tag.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, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 export declare const TYPES: {
@@ -40,7 +39,7 @@ export interface TagBaseProps {
      */
     disabled?: boolean;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     filter?: boolean;
     /**
@@ -48,7 +47,7 @@ export interface TagBaseProps {
      */
     id?: string;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
@@ -66,7 +65,7 @@ export interface TagBaseProps {
      */
     slug?: ReactNode;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     title?: string;
     /**
@@ -75,61 +74,6 @@ export interface TagBaseProps {
     type?: keyof typeof TYPES;
 }
 export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
-declare const Tag: {
-    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, slug, ...other }: TagProps<T>): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * Provide an alternative tag or component to use instead of the default
-         * wrapping element
-         */
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        /**
-         * Provide content to be rendered inside of a `Tag`
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Provide a custom className that is applied to the containing <span>
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify if the `Tag` is disabled
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Determine if `Tag` is a filter/chip
-         */
-        filter: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Specify the id for the tag.
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * Click handler for filter tag close button.
-         */
-        onClose: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * 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>;
-        /**
-         * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
-         */
-        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Text to show on clear filters
-         */
-        title: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Specify the type of the `Tag`
-         */
-        type: PropTypes.Requireable<string>;
-    };
-};
+declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps<React.ElementType<any>>, "ref"> & React.RefAttributes<HTMLElement | undefined>>;
 export declare const types: string[];
 export default Tag;

package/lib/components/Tag/Tag.js

@@ -18,6 +18,10 @@ var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
 var deprecate = require('../../prop-types/deprecate.js');
+var DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
+require('../Tooltip/Tooltip.js');
+var isEllipsisActive = require('./isEllipsisActive.js');
+var react = require('@floating-ui/react');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -47,7 +51,7 @@ const SIZES = {
   md: 'md',
   lg: 'lg'
 };
-const Tag = _ref => {
+const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref, forwardRef) {
   let {
     children,
     className,
@@ -67,7 +71,14 @@ const Tag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const tagRef = React.useRef();
+  const ref = react.useMergeRefs([forwardRef, tagRef]);
   const tagId = id || `tag-${getInstanceId()}`;
+  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive.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__default["default"](`${prefix}--tag`, className, {
@@ -77,7 +88,7 @@ const Tag = _ref => {
     // TODO: V12 - Remove this class
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--tag--${type}`]: type,
-    [`${prefix}--tag--interactive`]: other.onClick && !isInteractiveTag
+    [`${prefix}--tag--interactive`]: other.onClick && !isInteractiveTag && isEllipsisApplied
   });
   const typeText = type !== undefined && type in Object.keys(TYPES) ? TYPES[type] : '';
   const handleClose = event => {
@@ -103,8 +114,8 @@ const Tag = _ref => {
     }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--tag__custom-icon`
     }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-      className: `${prefix}--tag__label`,
-      title: typeof children === 'string' ? children : undefined
+      title: typeof children === 'string' ? children : undefined,
+      className: `${prefix}--tag__label`
     }, children !== null && children !== undefined ? children : typeText), normalizedSlug, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
       className: `${prefix}--tag__close-icon`,
@@ -115,14 +126,29 @@ const Tag = _ref => {
     }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
   }
   const ComponentTag = BaseComponent ?? (other.onClick || className?.includes(`${prefix}--tag--operational`) ? 'button' : 'div');
+  const labelClasses = cx__default["default"]({
+    [`${prefix}--tag__label`]: !isInteractiveTag,
+    [`${prefix}--tag--${type}`]: type && !isInteractiveTag
+  });
   return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
     disabled: disabled,
     className: tagClasses,
     id: tagId
   }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--tag__custom-icon`
-  }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement(Text.Text, null, children !== null && children !== undefined ? children : typeText), normalizedSlug);
-};
+  }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', isEllipsisApplied && !isInteractiveTag ? /*#__PURE__*/React__default["default"].createElement(DefinitionTooltip.DefinitionTooltip, {
+    openOnHover: false,
+    definition: children !== null && children !== undefined ? children : typeText,
+    className: `${prefix}--definition--tooltip--tag`
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    title: children !== null && children !== undefined ? children : typeText,
+    className: labelClasses
+  }, children !== null && children !== undefined ? children : typeText)) : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    title: children !== null && children !== undefined ? children : typeText,
+    className: labelClasses
+  }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
+});
 Tag.propTypes = {
   /**
    * Provide an alternative tag or component to use instead of the default
@@ -144,7 +170,7 @@ Tag.propTypes = {
   /**
    * Determine if `Tag` is a filter/chip
    */
-  filter: deprecate["default"](PropTypes__default["default"].bool, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  filter: deprecate["default"](PropTypes__default["default"].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.
    */
@@ -152,7 +178,7 @@ Tag.propTypes = {
   /**
    * Click handler for filter tag close button.
    */
-  onClose: deprecate["default"](PropTypes__default["default"].func, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  onClose: deprecate["default"](PropTypes__default["default"].func, 'The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Optional prop to render a custom icon.
    * Can be a React component class
@@ -170,7 +196,7 @@ Tag.propTypes = {
   /**
    * Text to show on clear filters
    */
-  title: deprecate["default"](PropTypes__default["default"].string, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  title: deprecate["default"](PropTypes__default["default"].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`
    */

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

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export declare const isEllipsisActive: (element: any) => boolean;

package/lib/components/Tag/isEllipsisActive.js

@@ -0,0 +1,19 @@
+/**
+ * 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 });
+
+const isEllipsisActive = element => {
+  if (element) {
+    return element?.offsetWidth < element?.scrollWidth;
+  }
+  return false;
+};
+
+exports.isEllipsisActive = isEllipsisActive;

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

@@ -4,7 +4,7 @@
  * 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 TextArea from './TextArea';
+import TextArea, { type TextAreaProps } from './TextArea';
 export { default as TextAreaSkeleton } from './TextArea.Skeleton';
 export default TextArea;
-export { TextArea };
+export { TextArea, type TextAreaProps };

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

@@ -1,4 +1,6 @@
-import TextInput from './TextInput';
+import TextInput, { type TextInputProps } from './TextInput';
+import { type TextInputSkeletonProps } from './TextInput.Skeleton';
 export { default as TextInputSkeleton } from './TextInput.Skeleton';
 export default TextInput;
-export { TextInput };
+export { type TextInputSkeletonProps };
+export { TextInput, type TextInputProps };

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

@@ -4,6 +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 TileGroup from './TileGroup';
+import TileGroup, { type TileGroupProps } from './TileGroup';
 export default TileGroup;
-export { TileGroup };
+export { TileGroup, type TileGroupProps };

package/lib/components/Tooltip/Tooltip.js

@@ -47,18 +47,22 @@ function Tooltip(_ref) {
   const tooltipRef = React.useRef(null);
   const [open, setOpen] = useDelayedState.useDelayedState(defaultOpen);
   const [isDragging, setIsDragging] = React.useState(false);
+  const [focusByMouse, setFocusByMouse] = React.useState(false);
   const [isPointerIntersecting, setIsPointerIntersecting] = React.useState(false);
   const id = useId.useId('tooltip');
   const prefix = usePrefix.usePrefix();
   const child = React__default["default"].Children.only(children);
   const triggerProps = {
-    onFocus: () => setOpen(true),
-    onBlur: () => setOpen(false),
+    onFocus: () => !focusByMouse && setOpen(true),
+    onBlur: () => {
+      setOpen(false);
+      setFocusByMouse(false);
+    },
     onClick: () => closeOnActivation && setOpen(false),
     // This should be placed on the trigger in case the element is disabled
     onMouseEnter,
     onMouseLeave,
-    onMouseDown: onDragStart,
+    onMouseDown,
     onMouseMove: onMouseMove,
     onTouchStart: onDragStart
   };
@@ -90,8 +94,15 @@ function Tooltip(_ref) {
     }
   }
   function onMouseEnter() {
-    setIsPointerIntersecting(true);
-    setOpen(true, enterDelayMs);
+    // Interactive Tags should not support onMouseEnter
+    if (!rest?.onMouseEnter) {
+      setIsPointerIntersecting(true);
+      setOpen(true, enterDelayMs);
+    }
+  }
+  function onMouseDown() {
+    setFocusByMouse(true);
+    onDragStart();
   }
   function onMouseLeave() {
     setIsPointerIntersecting(false);

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

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { DefinitionTooltip } from './DefinitionTooltip';
-import { Tooltip } from './Tooltip';
-export { DefinitionTooltip, Tooltip };
+import { Tooltip, type TooltipProps } from './Tooltip';
+export { DefinitionTooltip, Tooltip, type TooltipProps };

package/lib/components/UnorderedList/UnorderedList.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import { type ComponentProps } from 'react';
-interface UnorderedListProps extends ComponentProps<'ul'> {
+export interface UnorderedListProps extends ComponentProps<'ul'> {
     nested?: boolean | undefined;
     isExpressive?: boolean | undefined;
 }

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

@@ -5,3 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 export { default, default as UnorderedList } from './UnorderedList';
+export { type UnorderedListProps } from './UnorderedList';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.58.0-rc.0",
+  "version": "1.58.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,9 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/icons-react": "^11.42.0-rc.0",
+    "@carbon/icons-react": "^11.42.0",
     "@carbon/layout": "^11.22.0",
-    "@carbon/styles": "^1.58.0-rc.0",
+    "@carbon/styles": "^1.58.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -81,7 +81,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.35.0",
+    "@carbon/themes": "^11.36.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "23f19271f964a10a9fbc4616a43b05f5cc14e7d1"
+  "gitHead": "08968165fe61174317b023555b812528d21bab39"
 }