@carbon/react 1.58.0-rc.0 → 1.58.1

package/lib/components/NumberInput/NumberInput.d.ts

@@ -133,4 +133,15 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     warnText?: ReactNode;
 }
 declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export interface Label {
+    disabled?: boolean;
+    hideLabel?: boolean;
+    id?: string;
+    label?: ReactNode;
+}
+export interface HelperTextProps {
+    id?: string;
+    description?: ReactNode;
+    disabled?: boolean;
+}
 export { NumberInput };

package/lib/components/NumberInput/NumberInput.js

@@ -397,7 +397,7 @@ NumberInput.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-function Label(_ref) {
+const Label = _ref => {
   let {
     disabled,
     id,
@@ -418,7 +418,7 @@ function Label(_ref) {
     }, label);
   }
   return null;
-}
+};
 Label.propTypes = {
   disabled: PropTypes__default["default"].bool,
   hideLabel: PropTypes__default["default"].bool,

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

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

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ComponentType } from 'react';
 /**
  * @param {Element} menuBody The menu body with the menu arrow.
  * @param {string} direction The floating menu direction.
@@ -17,14 +17,18 @@ export declare const getMenuOffset: (menuBody: any, direction: any, trigger: any
     top: number;
 } | undefined;
 interface Offset {
-    top: number;
-    left: number;
+    top?: number | null | undefined;
+    left?: number | null | undefined;
 }
-interface OverflowMenuProps {
+type IconProps = {
+    className?: string;
+    'aria-label'?: string;
+};
+export interface OverflowMenuProps {
     /**
      * Specify a label to be read by screen readers on the container node
      */
-    ['aria-label']: string;
+    ['aria-label']?: string;
     /**
      * Deprecated, please use `aria-label` instead.
      * Specify a label to be read by screen readers on the container note.
@@ -99,7 +103,7 @@ interface OverflowMenuProps {
     /**
      * Function called to override icon rendering.
      */
-    renderIcon?: React.ElementType;
+    renderIcon?: ComponentType<IconProps>;
     /**
      * Specify a CSS selector that matches the DOM element that should
      * be focused when the OverflowMenu opens

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

@@ -0,0 +1,13 @@
+/**
+ * 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 { type OverflowMenuProps } from './OverflowMenu';
+declare function OverflowMenu(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace OverflowMenu {
+    var displayName: string;
+}
+export default OverflowMenu;
+export { OverflowMenu, type OverflowMenuProps };

package/lib/components/ProgressBar/ProgressBar.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-interface ProgressBarProps {
+export interface ProgressBarProps {
     /**
      * Additional CSS class names.
      */

package/lib/components/ProgressBar/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 ProgressBar from './ProgressBar';
+import ProgressBar, { type ProgressBarProps } from './ProgressBar';
 export default ProgressBar;
-export { ProgressBar };
+export { ProgressBar, type ProgressBarProps };

package/lib/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> {
+export interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> {
     /**
      * Provide `<ProgressStep>` components to be rendered in the
      * `<ProgressIndicator>`
@@ -63,7 +63,7 @@ declare namespace ProgressIndicator {
         vertical: PropTypes.Requireable<boolean>;
     };
 }
-interface ProgressStepProps {
+export interface ProgressStepProps {
     /**
      * Provide an optional className to be applied to the containing `<li>` node
      */

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

@@ -4,5 +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 { type ProgressIndicatorProps, type ProgressStepProps } from './ProgressIndicator';
 export { default as ProgressIndicatorSkeleton } from './ProgressIndicator.Skeleton';
 export * from './ProgressIndicator';
+export { type ProgressIndicatorProps, type ProgressStepProps };

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

@@ -4,5 +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 { type StructuredListWrapperProps } from './StructuredList';
 export * from './StructuredList';
 export { default as StructuredListSkeleton, type StructuredListSkeletonProps, } from './StructuredList.Skeleton';
+export { type StructuredListWrapperProps };

package/lib/components/Switch/Switch.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ButtonHTMLAttributes, ReactNode } from 'react';
-interface SwitchEventHandlersParams {
+export interface SwitchEventHandlersParams {
     index?: number;
     name?: string | number;
     text?: string;

package/lib/components/Switch/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 Switch from './Switch';
+import Switch, { type SwitchProps } from './Switch';
 import IconSwitch from './IconSwitch';
 export default Switch;
-export { Switch, IconSwitch };
+export { Switch, IconSwitch, type SwitchProps };

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

@@ -5,5 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { Tab } from '../Tabs/Tabs';
+import { type TabProps } from '../Tabs/Tabs';
 export default Tab;
-export { Tab };
+export { Tab, type TabProps };

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

@@ -9,10 +9,6 @@ import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES, TYPES } from './Tag';
 export interface DismissibleTagBaseProps {
-    /**
-     * Provide content to be rendered inside of a `DismissibleTag`
-     */
-    children?: React.ReactNode;
     /**
      * Provide a custom className that is applied to the containing <span>
      */
@@ -43,6 +39,10 @@ export interface DismissibleTagBaseProps {
      * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
      */
     slug?: ReactNode;
+    /**
+     * Provide text to be rendered inside of a the tag.
+     */
+    text?: string;
     /**
      * Text to show on clear filters
      */
@@ -54,12 +54,8 @@ export interface DismissibleTagBaseProps {
 }
 export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
 declare const DismissibleTag: {
-    <T extends React.ElementType<any>>({ children, className, disabled, id, renderIcon, title, onClose, slug, size, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
-        /**
-         * Provide content to be rendered inside of a `DismissibleTag`
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Provide a custom className that is applied to the containing <span>
          */
@@ -90,6 +86,10 @@ declare const DismissibleTag: {
          * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
          */
         slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide text to be rendered inside of a the tag.
+         */
+        text: PropTypes.Requireable<string>;
         /**
          * Text to show on clear filters
          */

package/lib/components/Tag/DismissibleTag.js

@@ -17,6 +17,11 @@ var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var Tag = require('./Tag.js');
 var iconsReact = require('@carbon/icons-react');
+require('../Tooltip/DefinitionTooltip.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
+require('../Text/index.js');
+var isEllipsisActive = require('./isEllipsisActive.js');
+var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,21 +33,27 @@ var _Close;
 const getInstanceId = setupGetInstanceId["default"]();
 const DismissibleTag = _ref => {
   let {
-    children,
     className,
     disabled,
     id,
     renderIcon,
-    title = 'Clear filter',
+    title = 'Dismiss',
     onClose,
     slug,
     size,
+    text,
     type,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const tagLabelRef = React.useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = cx__default["default"](`${prefix}--tag--filter`, className);
+  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
+  }, [prefix, tagLabelRef]);
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
@@ -56,6 +67,7 @@ const DismissibleTag = _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
@@ -63,7 +75,9 @@ const DismissibleTag = _ref => {
     onClick,
     ...otherProps
   } = other;
+  const dismissLabel = `Dismiss "${text}"`;
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: tagLabelRef,
     type: type,
     size: size,
     renderIcon: renderIcon,
@@ -72,20 +86,25 @@ const DismissibleTag = _ref => {
     id: tagId
   }, otherProps), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--interactive--tag-children`
-  }, children, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    title: text,
+    className: `${prefix}--tag__label`
+  }, text), /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+    label: isEllipsisApplied ? dismissLabel : title,
+    align: "bottom",
+    className: tooltipClasses,
+    leaveDelayMs: 0,
+    closeOnActivation: true
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     className: `${prefix}--tag__close-icon`,
     onClick: handleClose,
     disabled: disabled,
     "aria-label": title,
     title: title
-  }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)))));
+  }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)))), normalizedSlug));
 };
 DismissibleTag.propTypes = {
-  /**
-   * Provide content to be rendered inside of a `DismissibleTag`
-   */
-  children: PropTypes__default["default"].node,
   /**
    * Provide a custom className that is applied to the containing <span>
    */
@@ -116,6 +135,10 @@ DismissibleTag.propTypes = {
    * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
    */
   slug: PropTypes__default["default"].node,
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text: PropTypes__default["default"].string,
   /**
    * Text to show on clear filters
    */

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

@@ -21,10 +21,6 @@ declare const TYPES: {
     'warm-gray': string;
 };
 export interface OperationalTagBaseProps {
-    /**
-     * Provide content to be rendered inside of a `OperationalTag`
-     */
-    children?: React.ReactNode;
     /**
      * Provide a custom className that is applied to the containing <span>
      */
@@ -52,6 +48,10 @@ export interface OperationalTagBaseProps {
      * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
      */
     slug?: ReactNode;
+    /**
+     * Provide text to be rendered inside of a the tag.
+     */
+    text?: string;
     /**
      * Specify the type of the `Tag`
      */
@@ -59,12 +59,8 @@ export interface OperationalTagBaseProps {
 }
 export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<T, OperationalTagBaseProps>;
 declare const OperationalTag: {
-    <T extends React.ElementType<any>>({ children, className, disabled, id, renderIcon, slug, size, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any>>({ className, disabled, id, renderIcon, slug, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
-        /**
-         * Provide content to be rendered inside of a `OperationalTag`
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Provide a custom className that is applied to the containing <span>
          */
@@ -91,6 +87,10 @@ declare const OperationalTag: {
          * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
          */
         slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide text to be rendered inside of a the tag.
+         */
+        text: PropTypes.Requireable<string>;
         /**
          * Specify the type of the `Tag`
          */

package/lib/components/Tag/OperationalTag.js

@@ -16,6 +16,11 @@ 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 isEllipsisActive = require('./isEllipsisActive.js');
+var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -38,19 +43,25 @@ const TYPES = {
 };
 const OperationalTag = _ref => {
   let {
-    children,
     className,
     disabled,
     id,
     renderIcon,
     slug,
     size,
+    text,
     type = 'gray',
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const tagRef = React.useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = cx__default["default"](`${prefix}--tag--operational`, className);
+  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
@@ -58,22 +69,42 @@ const OperationalTag = _ref => {
       kind: 'inline'
     });
   }
+  const tooltipClasses = cx__default["default"](`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
+  if (isEllipsisApplied) {
+    return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+      label: text,
+      align: "bottom",
+      className: tooltipClasses,
+      leaveDelayMs: 0,
+      onMouseEnter: () => false,
+      closeOnActivation: true
+    }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+      ref: tagRef,
+      type: type,
+      size: size,
+      renderIcon: renderIcon,
+      disabled: disabled,
+      className: tagClasses,
+      id: tagId
+    }, other), /*#__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"]({
+    ref: tagRef,
     type: type,
     size: size,
     renderIcon: renderIcon,
     disabled: disabled,
     className: tagClasses,
     id: tagId
-  }, other), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--interactive--tag-children`
-  }, children, normalizedSlug));
+  }, other), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    title: text,
+    className: `${prefix}--tag__label`
+  }, text));
 };
 OperationalTag.propTypes = {
-  /**
-   * Provide content to be rendered inside of a `OperationalTag`
-   */
-  children: PropTypes__default["default"].node,
   /**
    * Provide a custom className that is applied to the containing <span>
    */
@@ -100,6 +131,10 @@ OperationalTag.propTypes = {
    * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
    */
   slug: PropTypes__default["default"].node,
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text: PropTypes__default["default"].string,
   /**
    * Specify the type of the `Tag`
    */

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

@@ -9,10 +9,6 @@ import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
 export interface SelectableTagBaseProps {
-    /**
-     * Provide content to be rendered inside of a `SelectableTag`
-     */
-    children?: React.ReactNode;
     /**
      * Provide a custom className that is applied to the containing <span>
      */
@@ -43,15 +39,15 @@ export interface SelectableTagBaseProps {
      * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
      */
     slug?: ReactNode;
+    /**
+     * Provide text to be rendered inside of a the tag.
+     */
+    text?: string;
 }
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
 declare const SelectableTag: {
-    <T extends React.ElementType<any>>({ children, className, disabled, id, renderIcon, selected, slug, size, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any>>({ className, disabled, id, renderIcon, selected, slug, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
-        /**
-         * Provide content to be rendered inside of a `SelectableTag`
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Provide a custom className that is applied to the containing <span>
          */
@@ -82,6 +78,10 @@ declare const SelectableTag: {
          * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
          */
         slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide text to be rendered inside of a the tag.
+         */
+        text: PropTypes.Requireable<string>;
     };
 };
 export default SelectableTag;

package/lib/components/Tag/SelectableTag.js

@@ -16,6 +16,11 @@ 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 isEllipsisActive = require('./isEllipsisActive.js');
+var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,7 +31,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const getInstanceId = setupGetInstanceId["default"]();
 const SelectableTag = _ref => {
   let {
-    children,
     className,
     disabled,
     id,
@@ -34,14 +38,21 @@ const SelectableTag = _ref => {
     selected = false,
     slug,
     size,
+    text,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const tagRef = React.useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const [selectedTag, setSelectedTag] = React.useState(selected);
   const tagClasses = cx__default["default"](`${prefix}--tag--selectable`, className, {
     [`${prefix}--tag--selectable-selected`]: selectedTag
   });
+  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
@@ -49,6 +60,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,7 +68,29 @@ 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"]({
+      ref: tagRef,
+      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"]({
+    ref: tagRef,
     slug: slug,
     size: size,
     renderIcon: renderIcon,
@@ -64,15 +98,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 +133,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;