@carbon/react 1.44.0-rc.0 → 1.45.0-rc.0

package/lib/components/TextArea/TextArea.js

@@ -49,6 +49,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     placeholder = '',
     enableCounter = false,
     maxCount = undefined,
+    counterMode = 'character',
     warn = false,
     warnText = '',
     rows = 4,
@@ -63,15 +64,25 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     defaultValue,
     value
   } = other;
-  const [textCount, setTextCount] = React.useState(defaultValue?.toString()?.length || value?.toString()?.length || 0);
   const {
     current: textAreaInstanceId
   } = React.useRef(getInstanceId());
   const textareaRef = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, textareaRef]);
+  function getInitialTextCount() {
+    const targetValue = defaultValue || value || textareaRef.current?.value || '';
+    const strValue = targetValue.toString();
+    if (counterMode === 'character') {
+      return strValue.length;
+    } else {
+      return strValue.match(/\w+/g)?.length || 0;
+    }
+  }
+  const [textCount, setTextCount] = React.useState(getInitialTextCount());
   React.useEffect(() => {
-    setTextCount(defaultValue?.toString()?.length || value?.toString()?.length || 0);
-  }, [value, defaultValue]);
+    setTextCount(getInitialTextCount());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, defaultValue, counterMode]);
   useIsomorphicEffect["default"](() => {
     if (other.cols && textareaRef.current) {
       textareaRef.current.style.width = '';
@@ -82,14 +93,63 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
   }, [other.cols]);
   const textareaProps = {
     id,
+    onKeyDown: evt => {
+      if (!disabled && enableCounter && counterMode === 'word') {
+        const key = evt.which;
+        if (maxCount && textCount >= maxCount && key === 32) {
+          evt.preventDefault();
+        }
+      }
+    },
+    onPaste: evt => {
+      if (!disabled) {
+        if (counterMode === 'word' && enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
+          const existingWords = textareaRef.current.value.match(/\w+/g) || [];
+          const pastedWords = evt.clipboardData.getData('Text').match(/\w+/g) || [];
+          const totalWords = existingWords.length + pastedWords.length;
+          if (totalWords > maxCount) {
+            evt.preventDefault();
+            const allowedWords = existingWords.concat(pastedWords).slice(0, maxCount);
+            setTimeout(() => {
+              setTextCount(maxCount);
+            }, 0);
+            textareaRef.current.value = allowedWords.join(' ');
+          }
+        }
+      }
+    },
     onChange: evt => {
-      if (!disabled && onChange) {
-        evt?.persist?.();
-        // delay textCount assignation to give the textarea element value time to catch up if is a controlled input
-        setTimeout(() => {
-          setTextCount(evt.target?.value?.length);
-        }, 0);
-        onChange(evt);
+      if (!disabled) {
+        if (counterMode == 'character') {
+          evt?.persist?.();
+          // delay textCount assignation to give the textarea element value time to catch up if is a controlled input
+          setTimeout(() => {
+            setTextCount(evt.target?.value?.length);
+          }, 0);
+        } else if (counterMode == 'word') {
+          if (!evt.target.value) {
+            setTimeout(() => {
+              setTextCount(0);
+            }, 0);
+            return;
+          }
+          if (enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
+            const matchedWords = evt.target?.value?.match(/\w+/g);
+            if (matchedWords && matchedWords.length <= maxCount) {
+              textareaRef.current.removeAttribute('maxLength');
+              setTimeout(() => {
+                setTextCount(matchedWords.length);
+              }, 0);
+            } else if (matchedWords && matchedWords.length > maxCount) {
+              setTimeout(() => {
+                setTextCount(matchedWords.length);
+              }, 0);
+            }
+          }
+        }
+        if (onChange) {
+          onChange(evt);
+        }
       }
     },
     onClick: evt => {
@@ -124,7 +184,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+  const counter = enableCounter && maxCount && (counterMode === 'character' || counterMode === 'word') ? /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
     className: counterClasses
   }, `${textCount}/${maxCount}`) : null;
@@ -157,9 +217,12 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     ariaDescribedBy = helperId;
   }
   if (enableCounter) {
-    textareaProps.maxLength = maxCount;
+    // handle different counter mode
+    if (counterMode == 'character') {
+      textareaProps.maxLength = maxCount;
+    }
   }
-  const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
+  const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount, counterMode === 'word' ? 'words' : undefined);
   const input = /*#__PURE__*/React__default["default"].createElement("textarea", _rollupPluginBabelHelpers["extends"]({}, other, textareaProps, {
     placeholder: placeholder,
     className: textareaClasses,
@@ -207,6 +270,10 @@ TextArea.propTypes = {
    * Specify the `cols` attribute for the underlying `<textarea>` node
    */
   cols: PropTypes__default["default"].number,
+  /**
+   * Specify the method used for calculating the counter number
+   */
+  counterMode: PropTypes__default["default"].oneOf(['character', 'word']),
   /**
    * Optionally provide the default value of the `<textarea>`
    */
@@ -216,7 +283,7 @@ TextArea.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Specify whether to display the character counter
+   * Specify whether to display the counter
    */
   enableCounter: PropTypes__default["default"].bool,
   /**
@@ -250,7 +317,7 @@ TextArea.propTypes = {
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `TextArea` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
   /**
-   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   * Max entity count allowed for the textarea. This is needed in order for enableCounter to display
    */
   maxCount: PropTypes__default["default"].number,
   /**
@@ -276,7 +343,7 @@ TextArea.propTypes = {
    */
   rows: PropTypes__default["default"].number,
   /**
-   * Provide a `Slug` component to be rendered inside the `TextArea` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
    */
   slug: PropTypes__default["default"].node,
   /**

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

@@ -87,7 +87,7 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
      */
     size?: 'sm' | 'md' | 'lg' | 'xl';
     /**
-     * Provide a `Slug` component to be rendered inside the `TextInput` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
      */
     slug?: ReactNodeLike;
     /**

package/lib/components/TextInput/TextInput.js

@@ -271,7 +271,7 @@ TextInput.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
   /**
-   * Provide a `Slug` component to be rendered inside the `TextInput` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
    */
   slug: PropTypes__default["default"].node,
   /**

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

@@ -1,9 +1,19 @@
 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;
     /** @deprecated */
     light?: boolean;
+    /**
+     * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
+     * when `slug` prop is present
+     */
+    hasRoundedCorners?: boolean;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     */
+    slug?: ReactNodeLike;
 }
 export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLDivElement>>;
 export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
@@ -19,6 +29,11 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
      * Specify whether the ClickableTile should be disabled
      */
     disabled?: boolean;
+    /**
+     * **Experimental**: Specify if the `ClickableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners?: boolean;
     /**
      * The href for the link.
      */
@@ -41,6 +56,10 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
      * The rel property for the link.
      */
     rel?: string;
+    /**
+     * **Experimental**: Specify if a `Slug` icon should be rendered inside the `ClickableTile`
+     */
+    slug?: boolean;
 }
 export declare const ClickableTile: React.ForwardRefExoticComponent<ClickableTileProps & React.RefAttributes<HTMLAnchorElement>>;
 export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
@@ -52,6 +71,11 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
      * Specify whether the SelectableTile should be disabled
      */
     disabled?: boolean;
+    /**
+     * **Experimental**: Specify if the `SelectableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners?: boolean;
     /**
      * The ID of the `<input>`.
      */
@@ -77,6 +101,10 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
      * `true` to select this tile.
      */
     selected?: boolean;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify the tab index of the wrapper element
      */
@@ -101,6 +129,11 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
      * `true` if the tile is expanded.
      */
     expanded?: boolean;
+    /**
+     * **Experimental**: Specify if the `ExpandableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners?: boolean;
     /**
      * An ID that can be provided to aria-labelledby
      */
@@ -113,6 +146,10 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
      * optional handler to trigger a function when a key is pressed
      */
     onKeyUp?(event: KeyboardEvent): void;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
+     */
+    slug?: ReactNodeLike;
     /**
      * The `tabindex` attribute.
      */

package/lib/components/Tile/Tile.js

@@ -34,20 +34,26 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
+var _rect, _path, _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
 const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_ref, ref) {
   let {
     children,
     className,
     light = false,
+    slug,
+    hasRoundedCorners = false,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const tileClasses = cx__default["default"](`${prefix}--tile`, light && `${prefix}--tile--light`, className);
+  const tileClasses = cx__default["default"](`${prefix}--tile`, {
+    [`${prefix}--tile--light`]: light,
+    [`${prefix}--tile--slug`]: slug,
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
+  }, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: tileClasses,
     ref: ref
-  }, rest), children);
+  }, rest), children, slug);
 });
 Tile.displayName = 'Tile';
 Tile.propTypes = {
@@ -59,13 +65,22 @@ Tile.propTypes = {
    * The CSS class names.
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
+   * when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes__default["default"].bool,
   /**
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    *
    * @deprecated
    */
-  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.')
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
+   */
+  slug: PropTypes__default["default"].node
 };
 const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function ClickableTile(_ref2, ref) {
   let {
@@ -78,10 +93,17 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     onClick = () => {},
     onKeyDown = () => {},
     renderIcon: Icon,
+    hasRoundedCorners,
+    slug,
     ...rest
   } = _ref2;
   const prefix = usePrefix.usePrefix();
-  const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--clickable`, clicked && `${prefix}--tile--is-clicked`, light && `${prefix}--tile--light`, className);
+  const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--clickable`, {
+    [`${prefix}--tile--is-clicked`]: clicked,
+    [`${prefix}--tile--light`]: light,
+    [`${prefix}--tile--slug`]: slug,
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
+  }, className);
   const [isSelected, setIsSelected] = React.useState(clicked);
   function handleOnClick(evt) {
     evt?.persist?.();
@@ -95,6 +117,25 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     }
     onKeyDown(evt);
   }
+
+  // To Do: Replace with an an icon from `@carbon/react`
+  // since the hollow slug in `ClickableTile` is not interactive
+  const hollowSlugIcon = /*#__PURE__*/React__default["default"].createElement("svg", {
+    className: `${prefix}--tile--slug-icon`,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, _rect || (_rect = /*#__PURE__*/React__default["default"].createElement("rect", {
+    x: "0.5",
+    y: "0.5",
+    width: "23",
+    height: "23"
+  })), _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
+    fill: "#161616"
+  })));
   const v12DefaultIcons = index.useFeatureFlag('enable-v12-tile-default-icons');
   if (v12DefaultIcons) {
     if (!Icon) {
@@ -116,7 +157,9 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     onKeyDown: handleOnKeyDown,
     ref: ref,
     disabled: disabled
-  }, rest), children, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, rest), slug ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--tile-content`
+  }, children) : children, slug && hollowSlugIcon, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses,
     "aria-hidden": "true"
   }));
@@ -139,6 +182,11 @@ ClickableTile.propTypes = {
    * Specify whether the ClickableTile should be disabled
    */
   disabled: PropTypes__default["default"].bool,
+  /**
+   * **Experimental**: Specify if the `ClickableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes__default["default"].bool,
   /**
    * The href for the link.
    */
@@ -180,6 +228,8 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     selected = false,
     tabIndex = 0,
     title = 'title',
+    slug,
+    hasRoundedCorners,
     ...rest
   } = _ref3;
   const prefix = usePrefix.usePrefix();
@@ -187,12 +237,21 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
   const keyDownHandler = onKeyDown;
   const [isSelected, setIsSelected] = React.useState(selected);
   const [prevSelected, setPrevSelected] = React.useState(selected);
-  const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--selectable`, isSelected && `${prefix}--tile--is-selected`, light && `${prefix}--tile--light`, disabled && `${prefix}--tile--disabled`, className);
+  const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--selectable`, {
+    [`${prefix}--tile--is-selected`]: isSelected,
+    [`${prefix}--tile--light`]: light,
+    [`${prefix}--tile--disabled`]: disabled,
+    [`${prefix}--tile--slug`]: slug,
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
+  }, className);
 
   // TODO: rename to handleClick when handleClick prop is deprecated
   function handleOnClick(evt) {
     evt.preventDefault();
     evt?.persist?.();
+    if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
+      return;
+    }
     setIsSelected(!isSelected);
     clickHandler(evt);
     onChange(evt);
@@ -216,6 +275,16 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     setIsSelected(selected);
     setPrevSelected(selected);
   }
+
+  // Slug is always size `xs`
+  const slugRef = React.useRef(null);
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'xs',
+      ref: slugRef
+    });
+  }
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
@@ -238,10 +307,9 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
       as: "label",
       htmlFor: id,
       className: `${prefix}--tile-content`
-    }, children))
+    }, children), normalizedSlug)
   );
 });
-SelectableTile.displayName = 'SelectableTile';
 SelectableTile.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
@@ -249,6 +317,11 @@ SelectableTile.propTypes = {
    * Specify whether the SelectableTile should be disabled
    */
   disabled: PropTypes__default["default"].bool,
+  /**
+   * **Experimental**: Specify if the `SelectableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes__default["default"].bool,
   /**
    * The ID of the `<input>`.
    */
@@ -279,6 +352,10 @@ SelectableTile.propTypes = {
    * `true` to select this tile.
    */
   selected: PropTypes__default["default"].bool,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Specify the tab index of the wrapper element
    */
@@ -310,6 +387,8 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     tileCollapsedLabel,
     tileExpandedLabel,
     light,
+    slug,
+    hasRoundedCorners,
     ...rest
   } = _ref4;
   const [isTileMaxHeight, setIsTileMaxHeight] = React.useState(tileMaxHeight);
@@ -365,7 +444,12 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     [`${prefix}--tile--is-expanded`]: isExpanded,
     [`${prefix}--tile--light`]: light
   }, className);
-  const interactiveClassNames = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--expandable`, `${prefix}--tile--expandable--interactive`, isExpanded && `${prefix}--tile--is-expanded`, light && `${prefix}--tile--light`, className);
+  const interactiveClassNames = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--expandable`, `${prefix}--tile--expandable--interactive`, {
+    [`${prefix}--tile--is-expanded`]: isExpanded,
+    [`${prefix}--tile--light`]: light,
+    [`${prefix}--tile--slug`]: slug,
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
+  }, className);
   const chevronInteractiveClassNames = cx__default["default"](`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
   const childrenAsArray = getChildren();
   useIsomorphicEffect["default"](() => {
@@ -391,10 +475,10 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
 
     // Interactive elements or elements that are given a role should be treated
     // the same because elements with a role can not be rendered inside a `button`
-    if (!useNoInteractiveChildren.getInteractiveContent(belowTheFold.current) && !useNoInteractiveChildren.getRoleContent(belowTheFold.current) && !useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current) && !useNoInteractiveChildren.getRoleContent(aboveTheFold.current)) {
+    if (!useNoInteractiveChildren.getInteractiveContent(belowTheFold.current) && !useNoInteractiveChildren.getRoleContent(belowTheFold.current) && !useNoInteractiveChildren.getInteractiveContent(aboveTheFold.current) && !useNoInteractiveChildren.getRoleContent(aboveTheFold.current) && !slug) {
       setInteractive(false);
     }
-  }, []);
+  }, [slug]);
   useIsomorphicEffect["default"](() => {
     if (!tile.current) {
       return;
@@ -417,13 +501,21 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     return () => resizeObserver.disconnect();
   }, []);
   const belowTheFoldId = useId.useId('expandable-tile-interactive');
+
+  // Slug is always size `xs`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'xs'
+    });
+  }
   return interactive ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     // @ts-expect-error: Needlesly strict & deep typing for the element type
     ref: ref,
     className: interactiveClassNames
   }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: tileContent
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: aboveTheFold,
     className: `${prefix}--tile-content`
   }, childrenAsArray[0]), /*#__PURE__*/React__default["default"].createElement("button", {
@@ -469,6 +561,11 @@ ExpandableTile.propTypes = {
    * `true` if the tile is expanded.
    */
   expanded: PropTypes__default["default"].bool,
+  /**
+   * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes__default["default"].bool,
   /**
    * An ID that can be provided to aria-labelledby
    */
@@ -486,6 +583,10 @@ ExpandableTile.propTypes = {
    * optional handler to trigger a function when a key is pressed
    */
   onKeyUp: PropTypes__default["default"].func,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * The `tabindex` attribute.
    */

package/lib/components/Tooltip/Tooltip.js

@@ -27,6 +27,10 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+/**
+ * Event types that trigger a "drag" to stop.
+ */
+const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
 function Tooltip(_ref) {
   let {
     align = 'top',
@@ -43,6 +47,8 @@ function Tooltip(_ref) {
   const containerRef = React.useRef(null);
   const tooltipRef = React.useRef(null);
   const [open, setOpen] = useDelayedState.useDelayedState(defaultOpen);
+  const [isDragging, setIsDragging] = 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);
@@ -51,7 +57,11 @@ function Tooltip(_ref) {
     onBlur: () => setOpen(false),
     onClick: () => closeOnActivation && setOpen(false),
     // This should be placed on the trigger in case the element is disabled
-    onMouseEnter
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown: onDragStart,
+    onMouseMove: onMouseMove,
+    onTouchStart: onDragStart
   };
   function getChildEventHandlers(childProps) {
     const eventHandlerFunctions = ['onFocus', 'onBlur', 'onClick', 'onMouseEnter'];
@@ -81,11 +91,34 @@ function Tooltip(_ref) {
     }
   }
   function onMouseEnter() {
+    setIsPointerIntersecting(true);
     setOpen(true, enterDelayMs);
   }
   function onMouseLeave() {
+    setIsPointerIntersecting(false);
+    if (isDragging) {
+      return;
+    }
     setOpen(false, leaveDelayMs);
   }
+  function onMouseMove(evt) {
+    if (evt.buttons === 1) {
+      setIsDragging(true);
+    } else {
+      setIsDragging(false);
+    }
+  }
+  function onDragStart() {
+    setIsDragging(true);
+  }
+  const onDragStop = React.useCallback(() => {
+    setIsDragging(false);
+    // Close the tooltip, unless the mouse pointer is within the bounds of the
+    // trigger.
+    if (!isPointerIntersecting) {
+      setOpen(false, leaveDelayMs);
+    }
+  }, [isPointerIntersecting, leaveDelayMs, setOpen]);
   useNoInteractiveChildren.useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
   React.useEffect(() => {
     if (containerRef !== null && containerRef.current) {
@@ -95,6 +128,19 @@ function Tooltip(_ref) {
       }
     }
   });
+  React.useEffect(() => {
+    if (isDragging) {
+      // Register drag stop handlers.
+      DRAG_STOP_EVENT_TYPES.forEach(eventType => {
+        document.addEventListener(eventType, onDragStop);
+      });
+    }
+    return () => {
+      DRAG_STOP_EVENT_TYPES.forEach(eventType => {
+        document.removeEventListener(eventType, onDragStop);
+      });
+    };
+  }, [isDragging, onDragStop]);
   return /*#__PURE__*/React__default["default"].createElement(index.Popover, _rollupPluginBabelHelpers["extends"]({}, rest, {
     align: align,
     className: cx__default["default"](`${prefix}--tooltip`, customClassName),