@carbon/react 1.57.0 → 1.58.0

package/lib/components/Tag/SelectableTag.js

@@ -16,6 +16,10 @@ var cx = require('classnames');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var Tag = require('./Tag.js');
+require('../Tooltip/DefinitionTooltip.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
+require('../Text/index.js');
+var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,7 +30,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const getInstanceId = setupGetInstanceId["default"]();
 const SelectableTag = _ref => {
   let {
-    children,
     className,
     disabled,
     id,
@@ -34,6 +37,7 @@ const SelectableTag = _ref => {
     selected = false,
     slug,
     size,
+    text,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -42,6 +46,16 @@ const SelectableTag = _ref => {
   const tagClasses = cx__default["default"](`${prefix}--tag--selectable`, className, {
     [`${prefix}--tag--selectable-selected`]: selectedTag
   });
+  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
+    return element.offsetWidth < element.scrollWidth;
+  };
+  React.useLayoutEffect(() => {
+    const elementTagId = document.querySelector(`#${tagId}`);
+    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    isEllipsisActive(newElement);
+  }, [prefix, tagId]);
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
@@ -49,6 +63,7 @@ const SelectableTag = _ref => {
       kind: 'inline'
     });
   }
+  const tooltipClasses = cx__default["default"](`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
 
   // Removing onClick from the spread operator
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -56,6 +71,26 @@ const SelectableTag = _ref => {
     onClick,
     ...otherProps
   } = other;
+  if (isEllipsisApplied) {
+    return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+      label: text,
+      align: "bottom",
+      className: tooltipClasses,
+      leaveDelayMs: 0,
+      onMouseEnter: false
+    }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+      slug: slug,
+      size: size,
+      renderIcon: renderIcon,
+      disabled: disabled,
+      className: tagClasses,
+      id: tagId,
+      onClick: () => setSelectedTag(!selectedTag)
+    }, otherProps), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+      title: text,
+      className: `${prefix}--tag__label`
+    }, text), normalizedSlug));
+  }
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
     slug: slug,
     size: size,
@@ -64,15 +99,12 @@ const SelectableTag = _ref => {
     className: tagClasses,
     id: tagId,
     onClick: () => setSelectedTag(!selectedTag)
-  }, otherProps), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--interactive--tag-children`
-  }, children, normalizedSlug));
+  }, otherProps), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    title: text,
+    className: `${prefix}--tag__label`
+  }, text));
 };
 SelectableTag.propTypes = {
-  /**
-   * Provide content to be rendered inside of a `SelectableTag`
-   */
-  children: PropTypes__default["default"].node,
   /**
    * Provide a custom className that is applied to the containing <span>
    */
@@ -102,7 +134,11 @@ SelectableTag.propTypes = {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
    */
-  slug: PropTypes__default["default"].node
+  slug: PropTypes__default["default"].node,
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text: PropTypes__default["default"].string
 };
 
 exports["default"] = SelectableTag;

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

@@ -4,8 +4,8 @@
  * 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, { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 export declare const TYPES: {
     red: string;
@@ -64,7 +64,7 @@ export interface TagBaseProps {
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */

package/lib/components/Tag/Tag.js

@@ -18,6 +18,8 @@ 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 Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -68,6 +70,16 @@ const Tag = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const tagId = id || `tag-${getInstanceId()}`;
+  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
+    return element.offsetWidth < element.scrollWidth;
+  };
+  React.useLayoutEffect(() => {
+    const elementTagId = document.querySelector(`#${tagId}`);
+    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    isEllipsisActive(newElement);
+  }, [prefix, tagId]);
   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 +89,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 +115,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,13 +127,27 @@ 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"]({
     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 = {
   /**

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

@@ -4,8 +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 { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
     /**
      * Provide a custom className that is applied directly to the underlying
@@ -31,7 +30,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
     /**
      * Provide text that is used alongside the control label for additional help
      */
-    helperText?: ReactNodeLike;
+    helperText?: ReactNode;
     /**
      * Specify whether you want the underlying label to be visually hidden
      */
@@ -47,12 +46,12 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
     /**
      * Provide the text that is displayed when the control is in an invalid state
      */
-    invalidText?: ReactNodeLike;
+    invalidText?: ReactNode;
     /**
      * Provide the text that will be read by a screen reader when visiting this
      * control
      */
-    labelText: ReactNodeLike;
+    labelText: ReactNode;
     /**
      * @deprecated
      * `true` to use the light version. For use on $ui-01 backgrounds only.
@@ -93,7 +92,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Provide the current value of the `<textarea>`
      */
@@ -105,7 +104,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: ReactNodeLike;
+    warnText?: ReactNode;
     /**
      * Specify the method used for calculating the counter number
      */

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/PasswordInput.d.ts

@@ -1,5 +1,4 @@
-import React, { InputHTMLAttributes } from 'react';
-import { ReactNodeLike } from 'prop-types';
+import React, { InputHTMLAttributes, ReactNode } from 'react';
 type ExcludedAttributes = 'size';
 export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
@@ -21,7 +20,7 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
     /**
      * Provide text that is used alongside the control label for additional help
      */
-    helperText?: ReactNodeLike;
+    helperText?: ReactNode;
     /**
      * Specify whether or not the underlying label is visually hidden
      */
@@ -45,11 +44,11 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
     /**
      * Provide the text that is displayed when the control is in an invalid state
      */
-    invalidText?: ReactNodeLike;
+    invalidText?: ReactNode;
     /**
      * Provide the text that will be read by a screen reader when visiting this control
      */
-    labelText: ReactNodeLike;
+    labelText: ReactNode;
     /**
      * @deprecated The `light` prop for `PasswordInput` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
      * `true` to use the light version. For use on $ui-01 backgrounds only.
@@ -119,7 +118,7 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: ReactNodeLike;
+    warnText?: ReactNode;
 }
 declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<unknown>>;
 export default PasswordInput;

package/lib/components/TextInput/PasswordInput.js

@@ -149,10 +149,10 @@ const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function
       align = tooltipPosition;
     }
     if (tooltipAlignment === 'end') {
-      align = `${tooltipPosition}-right`;
+      align = `${tooltipPosition}-end`;
     }
     if (tooltipAlignment === 'start') {
-      align = `${tooltipPosition}-left`;
+      align = `${tooltipPosition}-start`;
     }
   }
   if (tooltipPosition === 'right' || tooltipPosition === 'left') {

package/lib/components/TextInput/TextInput.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 { ReactNodeLike } from 'prop-types';
 import React, { ReactNode } from 'react';
 type ExcludedAttributes = 'defaultValue' | 'id' | 'size' | 'value';
 export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
@@ -89,7 +88,7 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify the type of the `<input>`
      */

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/Theme/index.d.ts

@@ -49,4 +49,5 @@ export declare namespace Theme {
  * Get access to the current theme
  */
 export declare function useTheme(): GlobalThemeProps;
+export declare function usePrefersDarkScheme(): boolean;
 export {};

package/lib/components/Theme/index.js

@@ -15,6 +15,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 var LayerContext = require('../Layer/LayerContext.js');
+var useMatchMedia = require('../../internal/useMatchMedia.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -72,8 +73,10 @@ function Theme(_ref2) {
     [`${prefix}--layer-one`]: true
   });
   const value = React__default["default"].useMemo(() => {
+    const isDark = theme && ['g90', 'g100'].includes(theme);
     return {
-      theme
+      theme,
+      isDark
     };
   }, [theme]);
   const BaseComponentAsAny = BaseComponent;
@@ -112,8 +115,12 @@ Theme.propTypes = {
 function useTheme() {
   return React__default["default"].useContext(ThemeContext);
 }
+function usePrefersDarkScheme() {
+  return useMatchMedia.useMatchMedia('(prefers-color-scheme: dark)');
+}
 
 exports.GlobalTheme = GlobalTheme;
 exports.Theme = Theme;
 exports.ThemeContext = ThemeContext;
+exports.usePrefersDarkScheme = usePrefersDarkScheme;
 exports.useTheme = useTheme;

package/lib/components/Tile/Tile.d.ts

@@ -1,5 +1,4 @@
 import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ChangeEvent, type ComponentType } from 'react';
-import { ReactNodeLike } from 'prop-types';
 export interface TileProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
@@ -13,7 +12,7 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
 }
 export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLDivElement>>;
 export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
@@ -104,7 +103,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify the tab index of the wrapper element
      */
@@ -149,7 +148,7 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * The `tabindex` attribute.
      */

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

@@ -4,14 +4,15 @@
  * 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, { ReactNodeLike } from 'prop-types';
+import PropTypes from 'prop-types';
+import { ReactNode } from 'react';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'onChange';
 export interface TileGroupProps extends Omit<ReactAttr<HTMLFieldSetElement>, ExcludedAttributes> {
     /**
      * Provide a collection of <RadioTile> components to render in the group
      */
-    children?: ReactNodeLike;
+    children?: ReactNode;
     /**
      * Provide an optional className to be applied to the container node
      */

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

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

package/lib/components/Toggle/Toggle.js

@@ -99,7 +99,7 @@ function Toggle(_ref) {
       role: "switch",
       type: "button",
       "aria-checked": checked,
-      "aria-labelledby": ariaLabelledby ?? labelId,
+      "aria-labelledby": ariaLabelledby ?? (labelText ? labelId : undefined),
       disabled: disabled,
       onClick: handleClick
     })), /*#__PURE__*/React__default["default"].createElement(LabelComponent, {

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -28,7 +28,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const DefinitionTooltip = _ref => {
   let {
-    align = 'bottom-left',
+    align = 'bottom-start',
     className,
     children,
     definition,

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';