@carbon/react 1.58.0 → 1.59.0-rc.0

package/es/components/Accordion/Accordion.Skeleton.d.ts

@@ -28,8 +28,13 @@ interface AccordionSkeletonProps {
      * `false` to not display the first item opened.
      */
     open?: boolean;
+    /**
+     * Specify if the Accordion should be an ordered list,
+     * default is `false`
+     */
+    ordered?: boolean;
 }
-declare function AccordionSkeleton({ align, className, count, isFlush, open, ...rest }: AccordionSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionSkeleton({ align, className, count, isFlush, open, ordered, ...rest }: AccordionSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionSkeleton {
     var propTypes: {
         /**

package/es/components/Accordion/Accordion.Skeleton.js

@@ -21,6 +21,7 @@ function AccordionSkeleton(_ref) {
     count = 4,
     isFlush,
     open = true,
+    ordered = false,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -29,7 +30,8 @@ function AccordionSkeleton(_ref) {
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
   });
   const numSkeletonItems = open ? count - 1 : count;
-  return /*#__PURE__*/React__default.createElement("ul", _extends({
+  const ListTag = ordered ? 'ol' : 'ul';
+  return /*#__PURE__*/React__default.createElement(ListTag, _extends({
     className: classes
   }, rest), open && /*#__PURE__*/React__default.createElement("li", {
     className: `${prefix}--accordion__item ${prefix}--accordion__item--active`

package/es/components/Accordion/Accordion.d.ts

@@ -27,13 +27,18 @@ export interface AccordionProps {
      * default is `false`, does not work with `align="start"`.
      */
     isFlush?: boolean;
+    /**
+     * Specify if the Accordion should be an ordered list,
+     * default is `false`
+     */
+    ordered?: boolean;
     /**
      * Specify the size of the Accordion. Currently
      * supports the following: `sm`, `md`, `lg`
      */
     size?: 'sm' | 'md' | 'lg';
 }
-declare function Accordion({ align, children, className: customClassName, disabled, isFlush, size, ...rest }: PropsWithChildren<AccordionProps>): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ align, children, className: customClassName, disabled, isFlush, ordered, size, ...rest }: PropsWithChildren<AccordionProps>): import("react/jsx-runtime").JSX.Element;
 declare namespace Accordion {
     var propTypes: {
         /**
@@ -56,6 +61,11 @@ declare namespace Accordion {
          * Specify whether Accordion text should be flush, default is false, does not work with align="start"
          */
         isFlush: PropTypes.Requireable<boolean>;
+        /**
+         * Specify if the Accordion should be an ordered list,
+         * default is `false`
+         */
+        ordered: PropTypes.Requireable<boolean>;
         /**
          * Specify the size of the Accordion. Currently supports the following:
          */

package/es/components/Accordion/Accordion.js

@@ -19,6 +19,7 @@ function Accordion(_ref) {
     className: customClassName,
     disabled = false,
     isFlush = false,
+    ordered = false,
     size,
     ...rest
   } = _ref;
@@ -30,9 +31,10 @@ function Accordion(_ref) {
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
   });
+  const ListTag = ordered ? 'ol' : 'ul';
   return /*#__PURE__*/React__default.createElement(AccordionProvider, {
     disabled: disabled
-  }, /*#__PURE__*/React__default.createElement("ul", _extends({
+  }, /*#__PURE__*/React__default.createElement(ListTag, _extends({
     className: className
   }, rest), children));
 }
@@ -57,6 +59,11 @@ Accordion.propTypes = {
    * Specify whether Accordion text should be flush, default is false, does not work with align="start"
    */
   isFlush: PropTypes.bool,
+  /**
+   * Specify if the Accordion should be an ordered list,
+   * default is `false`
+   */
+  ordered: PropTypes.bool,
   /**
    * Specify the size of the Accordion. Currently supports the following:
    */

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -27,6 +27,7 @@ function CheckboxGroup(_ref) {
     warn,
     warnText,
     slug,
+    orientation = 'vertical',
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -39,6 +40,7 @@ function CheckboxGroup(_ref) {
     className: `${prefix}--form__helper-text`
   }, helperText) : null;
   const fieldsetClasses = cx(`${prefix}--checkbox-group`, className, {
+    [`${prefix}--checkbox-group--${orientation}`]: orientation === 'horizontal',
     [`${prefix}--checkbox-group--readonly`]: readOnly,
     [`${prefix}--checkbox-group--invalid`]: !readOnly && invalid,
     [`${prefix}--checkbox-group--warning`]: showWarning,
@@ -58,6 +60,7 @@ function CheckboxGroup(_ref) {
     "data-invalid": invalid ? true : undefined,
     "aria-labelledby": rest['aria-labelledby'] || legendId,
     "aria-readonly": readOnly,
+    orientation: "vertical",
     "aria-describedby": !invalid && !warn && helper ? helperId : undefined
   }, rest), /*#__PURE__*/React__default.createElement("legend", {
     className: `${prefix}--label`,
@@ -104,6 +107,10 @@ CheckboxGroup.propTypes = {
    * Provide the text to be rendered inside of the fieldset <legend>
    */
   legendText: PropTypes.node.isRequired,
+  /**
+   * Provide the orientation for how the checkbox should be displayed
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Whether the CheckboxGroup should be read-only
    */

package/es/components/ComboButton/index.d.ts

@@ -8,6 +8,7 @@ import React from 'react';
 import { IconButton } from '../IconButton';
 import Button from '../Button';
 import { Menu } from '../Menu';
+export type MenuAlignment = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 interface ComboButtonProps {
     /**
      * A collection of `MenuItems` to be rendered as additional actions for this `ComboButton`.
@@ -28,7 +29,7 @@ interface ComboButtonProps {
     /**
      * Experimental property. Specify how the menu should align with the button element
      */
-    menuAlignment?: React.ComponentProps<typeof Menu>['menuAlignment'];
+    menuAlignment?: MenuAlignment;
     /**
      * Provide an optional function to be called when the primary action element is clicked.
      */

package/es/components/ComboButton/index.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState } from 'react';
+import React__default, { useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ChevronDown } from '@carbon/icons-react';
@@ -17,11 +17,11 @@ import { Menu } from '../Menu/Menu.js';
 import '../Menu/MenuItem.js';
 import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 import { useId } from '../../internal/useId.js';
-import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { flip, size, useFloating, autoUpdate } from '@floating-ui/react';
+import mergeRefs from '../../tools/mergeRefs.js';
 
 var _ChevronDown;
-const spacing = 0; // top and bottom spacing between the button and the menu. in px
 const defaultTranslations = {
   'carbon.combo-button.additional-actions': 'Additional actions'
 };
@@ -35,7 +35,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     disabled,
     label,
     onClick,
-    size = 'lg',
+    size: size$1 = 'lg',
     menuAlignment = 'bottom',
     tooltipAlignment,
     translateWithId: t = defaultTranslateWithId,
@@ -44,23 +44,54 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
   const id = useId('combobutton');
   const prefix = usePrefix();
   const containerRef = useRef(null);
-  const menuRef = useRef(null);
-  const ref = useMergedRefs([forwardRef, containerRef]);
-  const [width, setWidth] = useState(0);
+  const middlewares = [flip({
+    crossAxis: false
+  })];
+  if (menuAlignment === 'bottom' || menuAlignment === 'top') {
+    middlewares.push(size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    }));
+  }
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = useFloating({
+    placement: menuAlignment,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: middlewares,
+    whileElementsMounted: autoUpdate
+  });
+  const ref = mergeRefs(forwardRef, containerRef, refs.setReference);
   const {
     open,
-    x,
-    y,
     handleClick: hookOnClick,
     handleMousedown: handleTriggerMousedown,
     handleClose
   } = useAttachedMenu(containerRef);
+  useLayoutEffect(() => {
+    Object.keys(floatingStyles).forEach(style => {
+      if (refs.floating.current) {
+        refs.floating.current.style[style] = floatingStyles[style];
+      }
+    });
+  }, [floatingStyles, refs.floating, middlewareData, placement, open]);
   function handleTriggerClick() {
     if (containerRef.current) {
-      const {
-        width: w
-      } = containerRef.current.getBoundingClientRect();
-      setWidth(w);
       hookOnClick();
     }
   }
@@ -69,16 +100,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
       onClick(e);
     }
   }
-  function handleOpen() {
-    if (menuRef.current) {
-      menuRef.current.style.inlineSize = `${width}px`;
-      menuRef.current.style.minInlineSize = `${width}px`;
-      if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
-        menuRef.current.style.inlineSize = `fit-content`;
-      }
-    }
-  }
-  const containerClasses = cx(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
+  const containerClasses = cx(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size$1}`, {
     [`${prefix}--combo-button__container--open`]: open
   }, className);
   const menuClasses = cx(`${prefix}--combo-button__${menuAlignment}`);
@@ -92,13 +114,14 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     className: primaryActionClasses
   }, /*#__PURE__*/React__default.createElement(Button, {
     title: label,
-    size: size,
+    size: size$1,
     disabled: disabled,
     onClick: handlePrimaryActionClick
   }, label)), /*#__PURE__*/React__default.createElement(IconButton, {
+    ref: refs.setReference,
     className: triggerClasses,
     label: t('carbon.combo-button.additional-actions'),
-    size: size,
+    size: size$1,
     disabled: disabled,
     align: tooltipAlignment,
     "aria-haspopup": true,
@@ -110,16 +133,13 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     containerRef: containerRef,
     menuAlignment: menuAlignment,
     className: menuClasses,
-    ref: menuRef,
+    ref: refs.setFloating,
     id: id,
     label: t('carbon.combo-button.additional-actions'),
     mode: "basic",
-    size: size,
+    size: size$1,
     open: open,
-    onClose: handleClose,
-    onOpen: handleOpen,
-    x: x,
-    y: [y[0] - spacing, y[1] + spacing]
+    onClose: handleClose
   }, children));
 });
 ComboButton.propTypes = {

package/es/components/ContainedList/index.js

@@ -5,9 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { deprecateFieldOnObject } from '../../internal/deprecateFieldOnObject.js';
 import ContainedList from './ContainedList.js';
 export { default as ContainedList, default } from './ContainedList.js';
 import ContainedListItem from './ContainedListItem/ContainedListItem.js';
 export { default as ContainedListItem } from './ContainedListItem/ContainedListItem.js';
 
 ContainedList.ContainedListItem = ContainedListItem;
+if (process.env.NODE_ENV !== "production") {
+  deprecateFieldOnObject(ContainedList, 'ContainedListItem', ContainedListItem);
+}

package/es/components/ListBox/ListBoxMenuItem.js

@@ -18,7 +18,7 @@ function useIsTruncated(ref) {
     const {
       offsetWidth,
       scrollWidth
-    } = element.lastElementChild?.lastElementChild || element;
+    } = element;
     setIsTruncated(offsetWidth < scrollWidth);
   }, [ref, setIsTruncated]);
   return isTruncated;

package/es/components/RadioTile/RadioTile.d.ts

@@ -22,6 +22,11 @@ export interface RadioTileProps {
      * Specify whether the `RadioTile` should be disabled.
      */
     disabled?: boolean;
+    /**
+     * **Experimental**: Specify if the `ExpandableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners?: boolean;
     /**
      * Provide a unique id for the underlying `<input>`.
      */
@@ -42,6 +47,10 @@ export interface RadioTileProps {
      * the underlying `<input>` changes.
      */
     onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     */
+    slug?: React.ReactNode;
     /**
      * Specify the tab index of the underlying `<input>`.
      */

package/es/components/RadioTile/RadioTile.js

@@ -33,15 +33,19 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     id,
     onChange = noopFn,
     tabIndex = 0,
+    hasRoundedCorners,
+    slug,
     required,
     ...rest
   } = _ref;
   const prefix = usePrefix();
   const inputId = useFallbackId(id);
-  const className = cx(customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, {
+  const className = cx(customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, `${prefix}--tile--radio`, {
     [`${prefix}--tile--is-selected`]: checked,
     [`${prefix}--tile--light`]: light,
-    [`${prefix}--tile--disabled`]: disabled
+    [`${prefix}--tile--disabled`]: disabled,
+    [`${prefix}--tile--slug`]: slug,
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
   });
   const v12TileRadioIcons = useFeatureFlag('enable-v12-tile-radio-icons');
   function icon() {
@@ -64,6 +68,14 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
       onChange(value, name, evt);
     }
   }
+
+  // Slug is always size `xs`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'xs'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("input", {
     checked: checked,
     className: `${prefix}--tile-input`,
@@ -84,7 +96,7 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     className: `${prefix}--tile__checkmark`
   }, icon()), /*#__PURE__*/React__default.createElement(Text, {
     className: `${prefix}--tile-content`
-  }, children)));
+  }, children), normalizedSlug));
 });
 RadioTile.displayName = 'RadioTile';
 RadioTile.propTypes = {
@@ -104,6 +116,11 @@ RadioTile.propTypes = {
    * Specify whether the `RadioTile` should be disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes.bool,
   /**
    * Provide a unique id for the underlying `<input>`.
    */
@@ -126,6 +143,10 @@ RadioTile.propTypes = {
    * `true` to specify if the control is required.
    */
   required: PropTypes.bool,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify the tab index of the underlying `<input>`.
    */

package/es/components/Tag/DismissibleTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState, useLayoutEffect } from 'react';
+import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -16,6 +16,7 @@ import { Close } from '@carbon/icons-react';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Text/index.js';
+import { isEllipsisActive } from './isEllipsisActive.js';
 import { Text } from '../Text/Text.js';
 
 var _Close;
@@ -35,18 +36,14 @@ const DismissibleTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
+  const tagLabelRef = useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = cx(`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive(newElement));
+  }, [prefix, tagLabelRef]);
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
@@ -70,6 +67,7 @@ const DismissibleTag = _ref => {
   } = other;
   const dismissLabel = `Dismiss "${text}"`;
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    ref: tagLabelRef,
     type: type,
     size: size,
     renderIcon: renderIcon,

package/es/components/Tag/OperationalTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState, useLayoutEffect } from 'react';
+import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -15,6 +15,7 @@ import Tag, { SIZES } from './Tag.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Text/index.js';
+import { isEllipsisActive } from './isEllipsisActive.js';
 import { Text } from '../Text/Text.js';
 
 const getInstanceId = setupGetInstanceId();
@@ -43,18 +44,14 @@ const OperationalTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
+  const tagRef = useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
@@ -69,9 +66,10 @@ const OperationalTag = _ref => {
       align: "bottom",
       className: tooltipClasses,
       leaveDelayMs: 0,
-      onMouseEnter: false,
+      onMouseEnter: () => false,
       closeOnActivation: true
     }, /*#__PURE__*/React__default.createElement(Tag, _extends({
+      ref: tagRef,
       type: type,
       size: size,
       renderIcon: renderIcon,
@@ -84,6 +82,7 @@ const OperationalTag = _ref => {
     }, text), normalizedSlug));
   }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    ref: tagRef,
     type: type,
     size: size,
     renderIcon: renderIcon,

package/es/components/Tag/SelectableTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState, useLayoutEffect } from 'react';
+import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -15,6 +15,7 @@ import Tag, { SIZES } from './Tag.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Text/index.js';
+import { isEllipsisActive } from './isEllipsisActive.js';
 import { Text } from '../Text/Text.js';
 
 const getInstanceId = setupGetInstanceId();
@@ -31,21 +32,17 @@ const SelectableTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
+  const tagRef = useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const [selectedTag, setSelectedTag] = useState(selected);
   const tagClasses = cx(`${prefix}--tag--selectable`, className, {
     [`${prefix}--tag--selectable-selected`]: selectedTag
   });
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
@@ -67,8 +64,9 @@ const SelectableTag = _ref => {
       align: "bottom",
       className: tooltipClasses,
       leaveDelayMs: 0,
-      onMouseEnter: false
+      onMouseEnter: () => false
     }, /*#__PURE__*/React__default.createElement(Tag, _extends({
+      ref: tagRef,
       slug: slug,
       size: size,
       renderIcon: renderIcon,
@@ -82,6 +80,7 @@ const SelectableTag = _ref => {
     }, text), normalizedSlug));
   }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    ref: tagRef,
     slug: slug,
     size: size,
     renderIcon: renderIcon,